Expand what a web application can do with Web APIs. Make your applications more "native". Slides of my talk at code.talks 2014 in Hamburg/Germany

1. Web APIs
expand what the web can do...
Carsten Sandtner ( ) 2014 - code.talks 14@casarock

2. Who am I?
Carsten Sandtner
Head of Development at //mediaman GmbH
Mozilla representative
Javascript enthusiast and web developer since 1998.

5. The first browser war...
Microsoft vs. Netscape!

6. Arms race of features
Everyone invented new and "better" features!
support other features? Hell, NO!

7. And this happened...

8. Standards? What standards?
W3C - ignored...
"We know what you want!"

9. And Web Developers?
Implemented pretty good browser detection

10. And Browser vendors?
Browser Vendors wanted to be "supported"
... and this happened:

11. Faking User Agents
Mosaic/0.9 //grandmotherofall!
Mozilla/2.02[fr](WinNT;I) //Netscapesfirst!
Mozilla/4.0(compatible;MSIE4.0;Windows98)//IE4!
Funny? There is more...

12. Faking User Agents - part 2
Mozilla/5.0(Windows;U;WindowsNT5.1;en-US;rv:1.8.1.11)Gecko/20071127Firefox/2.0.0.11
//Firefox!
Mozilla/5.0(compatible;Konqueror/Version;OS-or-CPU)KHTML/KHTMLVersion(likeGecko)
//Konqueror
Mozilla/5.0(Macintosh;U;PPCMacOSX;en)AppleWebKit/124(KHTML,likeGecko)Safari/125.1
//Safari!
And Chrome?
Mozilla/5.0(Windows;U;WindowsNT5.1;en-US)AppleWebKit/525.13(KHTML,likeGecko)Chrome
/0.2.149.29Safari/525.13
But Opera?
Opera/8.0(WindowsNT5.1;U;en)
<9 ... >9 has...
Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1;en)Opera9.50
Mozilla/5.0(WindowsNT6.2;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/28.0.1500.9
5Safari/537.36OPR/15.0.1147.153
*sigh*

13. At the end: Everything is a
Mozilla...
and Internet Explorer won the first browser war

14. Internet Explorer won
Development stopped for 5 years!
"Optimized for IE 6!"
Standards? IE was the standard!

15. The second browser war...
The rise of the others

16. The others
Other browser vendors raised
They keep standards in mind and develop them together
Mozilla (Firefox)
Konqueror
Safari
Opera
Chrome

17. Standards, everywhere standards!
There is not only one "tool" for the internet

18. New Feature: Implemented a STANDARD!

19. Competition?
Still exisits, but:
Performance!
Security!
Release cycles!

20. Benchmarks
Standardized

21. Unique characteristic?
Add ons, technical features, developer tools etc..
Developers are being targeted.

22. “Make the Internet a better place”

23. The web won!

24. The "mobile" Web
eh? no.

25. The "real" mobile Web

26. Everything changes...
We want ...
... access to hardware features
... access Calendar, Addressbook
etc.
We got it!
But: Lessons learned from the past
Standards!

27. New technologies need new
APIs
Vendors work together
Service Workers (Google&Mozilla)
Web Components (Google&Mozilla)
WebGL etc.

28. “The web is everywhere”

29. “The web in your hands”

30. Mobiles need new APIs
iPhone 2007: No SDK, just HTML5!
A smartphone without a browser? Unbelieveable!
Smartphones pushed HTML5

31. HTML5 based OS

32. HTML5 OS needs new APIs
Firefox OS is open source and with standards in mind
Mozilla introduced new APIs for mobile devices
Consistent use of APIs

33. APIs submitted to W3C
Adopted by other mobile browsers ...
... and desktop browsers
more features, more fun!

34. Web APIs
tell me more

35. Definition
“WebAPI is a term used to refer to a suite of device
compatibility and access APIs that allow Web apps
and content to access device hardware (such as
battery status or the device vibration hardware), as
well as access to data stored on the device (such as
the calendar or contacts list).
By adding these APIs, we hope to expand what the
Web can do today and only proprietary platforms
were able to do in the past.”

36. Disclaimer
Some WebAPIs are not (yet) a standard
I've marked them with a *

37. Categories
Web APIs could be categorized
Communication
Datamanagement
Hardware access
"other"

38. Communication
Network Information API.
Bluetooth*, Mobile Connection API*, Network Stats API*, TCP Socket
API*, Telephony*, WebSMS*, WiFi Information API*.

39. Datamanagement
IndexedDB, Contacts API.
FileHandle API*, Device Storage API*, Settings API*.

40. Hardware access
Light events, Battery status, Geolocation, Pointer Lock, Proximity,
Device orientation, Screen orientation, Vibration API.
WebFM API*, Camera API*, Power Management API*.

41. "Other"
Alarm API, Simple Push API, Web Notifications, Idle API.
Apps API*, Web Activities*, WebPayment API*, Browser API*,
Permissions API*, Time/Clock API*.

42. Examples?

43. Network Connection
Information about the system's connection
varconnection=navigator.connection||
navigator.mozConnection||
navigator.webkitConnection;
vartype=connection.type;
functionupdateConnectionStatus(){
console.log("Connectiontypeischangefrom"+type+"to"+connection.type);
type=connection.type;
}
connection.addEventListener('typechange',updateConnectionStatus);
Firefox 12+, Firefox Mobile, Firefox OS, Android 2.2+

44. IndexedDB
“IndexedDB is an API for client-side storage of
significant amounts of structured data and for high
performance searches on this data using indexes. ”
NoSQL DB for Browsers...
Deserves an own talk... too complex for this one...
Supported by: Every major Browser on Desktop and every major mobile
browser ...
... excepted: Safari on iOS < 8

45. Notification
//Atfirst,let'scheckifwehavepermissionfornotification
//Ifnot,let'saskforit
if(Notification&&Notification.permission!=="granted"){
Notification.requestPermission(function(status){
if(Notification.permission!==status){
Notification.permission=status;
}
});
}
if(Notification&&Notification.permission==="granted"){
varn=newNotification("Hi!");
}
Notify me!
Desktop: Chrome 5+, Firefox 4+, Opera 25, Safari 6+
Mobile: Firefox Mobile 4+, Firefox OS

46. Light Events
Get current ambient light intensity
window.ondevicelight=function(event){
//Readouttheluxvalue
console.log(event.value);
};
Current lux: 0
Desktop: Firefox 22+
Mobile: Firefox Mobile

47. Battery Status
Information about the system's battery charge level and lets you be
notified by events that are sent when the battery level changes
varbattery=navigator.battery||
navigator.mozBattery||
navigator.webkitBattery,
info={
charging:battery.charging,
chargingTime:parseInt(battery.chargingTime/60,10),
dischargingTime:parseInt(battery.dischargingTime/60,10),
level:Math.round(battery.level*100)
};
functionupdateBatteryStatus(){
batterylevel.innerHTML=battery.level*100+"%";
batterystatus.innerHTML=battery.charging?"":"not";
}
battery.addEventListener("chargingchange",updateBatteryStatus);
battery.addEventListener("levelchange",updateBatteryStatus);
Battery: Level is and it's charging.
Desktop: Firefox 10+ Mobile: Firefox Mobile 10+

48. Proximity Events
The proximity events are a handy way to know when a user is close to a
device
window.addEventListener('userproximity',function(event){
if(event.near){
console.log('Phoneprobablyonusersear...');
}else{
console.log('phoneinyourhand...');
}
});

49. Detecting device orientation
Detection orientation and motion events
window.addEventListener("deviceorientation",handleOrientation,true);
functionhandleOrientation(event){
varalpha =event.alpha;//Z-Axis
varbeta =event.beta;//Y-Axis
vargamma =event.gamma;//X-Axis
//Dostuffwiththeneworientationdata
}
window.addEventListener("devicemotion",handleMotion,true);
functionhandleMotion(event){
varx=event.accelerationIncludingGravity.x;
vary=event.accelerationIncludingGravity.y;
varz=event.accelerationIncludingGravity.z;
varr=event.rotationRate;
}
Information about the speed of changes for the device's position and
orientation.
Desktop: Chrome 7+, 3.6+
Mobile: Android 3.0, Firefox Mobile 3.6+, Safari Mobile 4.2+

50. Vibration API
Rumble in your pocket!
varpattern=[200,100,200,200,100],
goodVibration=navigator.vibrate(pattern);
Mobile: Android, Firefox Mobile 11+

51. Screen orientation
Listening orientation change
screen.addEventListener("orientationchange",function(){
console.log("Theorientationofthescreenis:"+screen.orientation);
});
Preventing orientation change
screen.lockOrientation('landscape');
Support is complex: This API is experimental and currently available on
Firefox OS and Firefox for Android with a moz prefix, and for Internet
Explorer on Windows 8.1 and above with a ms prefix.

52. Pointer Lock
Request pointer lock on an element
canvas.requestPointerLock=canvas.requestPointerLock||
canvas.mozRequestPointerLock||
canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
Listen for changes
document.addEventListener('pointerlockchange',lockChangeAlert,false);
document.addEventListener('mozpointerlockchange',lockChangeAlert,false);
document.addEventListener('webkitpointerlockchange',lockChangeAlert,false);
Exit pointer lock
document.exitPointerLock=document.exitPointerLock ||
document.mozExitPointerLock||
document.webkitExitPointerLock;
//Attempttounlock
document.exitPointerLock();
Desktop: Chrome, Firefox

53. Page visibility
The Page Visibility API lets you know when a webpage is visible or in
focus
if(document.hidden){
//stopvideoetc.
}
document.addEventListener("visibilitychange",handleVisibilityChange,false);
functionhandleVisibilityChange(){
if(document.hidden){
//stopsomething.e.g.stopavideo,audioetc...
}else{
//dosomethingelse;)playvideo,audio...yougotit?
}
}
Currently prefixed (moz, webkit, ms)
Desktop: Chrome, Firefox 30+, Safari 7+, Opera 24+, IE10+
Mobile: Chrome Android, Android 4.4+, Firefox Mobile, Firefox OS

54. *Yawn* Nice...
... but these examples are just....
... examples

55. OK
Some live examples...

56. But first...
... some real world examples

57. BBC News
Network Information API
Warns when cellular connection detected and video should be played

58. Firefox Marketplace
Network Information API
Paying via carrier billing - Cellular detected

59. Firefox Marketplace 2
Network Information API
When WIFI is detected
Confirmation code via SMS

60. Mozilla Reps - Events
Geolocation

61. OK
NOW! Some live examples...

62. Ambient light
Ambient Light Demo

63. Notifications
Notifications Demo

64. And of course: Have FUN!
Fun, fun, fun

65. Install via AppInstall* API
AppInstall

66. And on a Device
Video

67. Conclusion
Standards are cool
WebAPIs allow us to build cooler web apps
WebAPIs are not a "mobile"-thingy
The "Web" becomes (more) "native"

68. Thank you!
Carsten Sandtner
Slides & Examples:
@casarock
casarock.github.io