Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web APIs
expand what the web can do...
Carsten Sandtner ( ) 2014 - code.talks 14@casarock
Who am I?
Carsten Sandtner
Head of Development at //mediaman GmbH
Mozilla representative
Javascript enthusiast and web dev...
The first browser war...
Microsoft vs. Netscape!
Arms race of features
Everyone invented new and "better" features!
support other features? Hell, NO!
And this happened...
Standards? What standards?
W3C - ignored...
"We know what you want!"
And Web Developers?
Implemented pretty good browser detection
And Browser vendors?
Browser Vendors wanted to be "supported"
... and this happened:
Faking User Agents
Mosaic/0.9 //grandmotherofall!
Mozilla/2.02[fr](WinNT;I) //Netscapesfirst!
Mozilla/4.0(compatible;MSIE4...
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!...
At the end: Everything is a
Mozilla...
and Internet Explorer won the first browser war
Internet Explorer won
Development stopped for 5 years!
"Optimized for IE 6!"
Standards? IE was the standard!
The second browser war...
The rise of the others
The others
Other browser vendors raised
They keep standards in mind and develop them together
Mozilla (Firefox)
Konqueror
...
Standards, everywhere standards!
There is not only one "tool" for the internet
New Feature: Implemented a STANDARD!
Competition?
Still exisits, but:
Performance!
Security!
Release cycles!
Benchmarks
Standardized
Unique characteristic?
Add ons, technical features, developer tools etc..
Developers are being targeted.
“Make the Internet a better place”
The web won!
The "mobile" Web
eh? no.
The "real" mobile Web
Everything changes...
We want ...
... access to hardware features
... access Calendar, Addressbook
etc.
We got it!
But: Le...
New technologies need new
APIs
Vendors work together
Service Workers (Google&Mozilla)
Web Components (Google&Mozilla)
WebG...
“The web is everywhere”
“The web in your hands”
Mobiles need new APIs
iPhone 2007: No SDK, just HTML5!
A smartphone without a browser? Unbelieveable!
Smartphones pushed H...
HTML5 based OS
HTML5 OS needs new APIs
Firefox OS is open source and with standards in mind
Mozilla introduced new APIs for mobile device...
APIs submitted to W3C
Adopted by other mobile browsers ...
... and desktop browsers
more features, more fun!
Web APIs
tell me more
Definition
“WebAPI is a term used to refer to a suite of device
compatibility and access APIs that allow Web apps
and cont...
Disclaimer
Some WebAPIs are not (yet) a standard
I've marked them with a *
Categories
Web APIs could be categorized
Communication
Datamanagement
Hardware access
"other"
Communication
Network Information API.
Bluetooth*, Mobile Connection API*, Network Stats API*, TCP Socket
API*, Telephony*...
Datamanagement
IndexedDB, Contacts API.
FileHandle API*, Device Storage API*, Settings API*.
Hardware access
Light events, Battery status, Geolocation, Pointer Lock, Proximity,
Device orientation, Screen orientation...
"Other"
Alarm API, Simple Push API, Web Notifications, Idle API.
Apps API*, Web Activities*, WebPayment API*, Browser API*...
Examples?
Network Connection
Information about the system's connection
varconnection=navigator.connection||
navigator.mozConnection|...
IndexedDB
“IndexedDB is an API for client-side storage of
significant amounts of structured data and for high
performance ...
Notification
//Atfirst,let'scheckifwehavepermissionfornotification
//Ifnot,let'saskforit
if(Notification&&Notification.per...
Light Events
Get current ambient light intensity
window.ondevicelight=function(event){
//Readouttheluxvalue
console.log(ev...
Battery Status
Information about the system's battery charge level and lets you be
notified by events that are sent when t...
Proximity Events
The proximity events are a handy way to know when a user is close to a
device
window.addEventListener('us...
Detecting device orientation
Detection orientation and motion events
window.addEventListener("deviceorientation",handleOri...
Vibration API
Rumble in your pocket!
varpattern=[200,100,200,200,100],
goodVibration=navigator.vibrate(pattern);
Mobile: A...
Screen orientation
Listening orientation change
screen.addEventListener("orientationchange",function(){
console.log("Theor...
Pointer Lock
Request pointer lock on an element
canvas.requestPointerLock=canvas.requestPointerLock||
canvas.mozRequestPoi...
Page visibility
The Page Visibility API lets you know when a webpage is visible or in
focus
if(document.hidden){
//stopvid...
*Yawn* Nice...
... but these examples are just....
... examples
OK
Some live examples...
But first...
... some real world examples
BBC News
Network Information API
Warns when cellular connection detected and video should be played
Firefox Marketplace
Network Information API
Paying via carrier billing - Cellular detected
Firefox Marketplace 2
Network Information API
When WIFI is detected
Confirmation code via SMS
Mozilla Reps - Events
Geolocation
OK
NOW! Some live examples...
Ambient light
Ambient Light Demo
Notifications
Notifications Demo
And of course: Have FUN!
Fun, fun, fun
Install via AppInstall* API
AppInstall
And on a Device
Video
Conclusion
Standards are cool
WebAPIs allow us to build cooler web apps
WebAPIs are not a "mobile"-thingy
The "Web" become...
Thank you!
Carsten Sandtner
Slides & Examples:
@casarock
casarock.github.io
Web APIs – expand what the Web can do
Web APIs – expand what the Web can do
Upcoming SlideShare
Loading in …5
×

Web APIs – expand what the Web can do

849 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Web APIs – expand what the Web can do

  1. 1. Web APIs expand what the web can do... Carsten Sandtner ( ) 2014 - code.talks 14@casarock
  2. 2. Who am I? Carsten Sandtner Head of Development at //mediaman GmbH Mozilla representative Javascript enthusiast and web developer since 1998.
  3. 3. The first browser war... Microsoft vs. Netscape!
  4. 4. Arms race of features Everyone invented new and "better" features! support other features? Hell, NO!
  5. 5. And this happened...
  6. 6. Standards? What standards? W3C - ignored... "We know what you want!"
  7. 7. And Web Developers? Implemented pretty good browser detection
  8. 8. And Browser vendors? Browser Vendors wanted to be "supported" ... and this happened:
  9. 9. 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...
  10. 10. 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*
  11. 11. At the end: Everything is a Mozilla... and Internet Explorer won the first browser war
  12. 12. Internet Explorer won Development stopped for 5 years! "Optimized for IE 6!" Standards? IE was the standard!
  13. 13. The second browser war... The rise of the others
  14. 14. The others Other browser vendors raised They keep standards in mind and develop them together Mozilla (Firefox) Konqueror Safari Opera Chrome
  15. 15. Standards, everywhere standards! There is not only one "tool" for the internet
  16. 16. New Feature: Implemented a STANDARD!
  17. 17. Competition? Still exisits, but: Performance! Security! Release cycles!
  18. 18. Benchmarks Standardized
  19. 19. Unique characteristic? Add ons, technical features, developer tools etc.. Developers are being targeted.
  20. 20. “Make the Internet a better place”
  21. 21. The web won!
  22. 22. The "mobile" Web eh? no.
  23. 23. The "real" mobile Web
  24. 24. Everything changes... We want ... ... access to hardware features ... access Calendar, Addressbook etc. We got it! But: Lessons learned from the past Standards!
  25. 25. New technologies need new APIs Vendors work together Service Workers (Google&Mozilla) Web Components (Google&Mozilla) WebGL etc.
  26. 26. “The web is everywhere”
  27. 27. “The web in your hands”
  28. 28. Mobiles need new APIs iPhone 2007: No SDK, just HTML5! A smartphone without a browser? Unbelieveable! Smartphones pushed HTML5
  29. 29. HTML5 based OS
  30. 30. 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
  31. 31. APIs submitted to W3C Adopted by other mobile browsers ... ... and desktop browsers more features, more fun!
  32. 32. Web APIs tell me more
  33. 33. 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.”
  34. 34. Disclaimer Some WebAPIs are not (yet) a standard I've marked them with a *
  35. 35. Categories Web APIs could be categorized Communication Datamanagement Hardware access "other"
  36. 36. Communication Network Information API. Bluetooth*, Mobile Connection API*, Network Stats API*, TCP Socket API*, Telephony*, WebSMS*, WiFi Information API*.
  37. 37. Datamanagement IndexedDB, Contacts API. FileHandle API*, Device Storage API*, Settings API*.
  38. 38. Hardware access Light events, Battery status, Geolocation, Pointer Lock, Proximity, Device orientation, Screen orientation, Vibration API. WebFM API*, Camera API*, Power Management API*.
  39. 39. "Other" Alarm API, Simple Push API, Web Notifications, Idle API. Apps API*, Web Activities*, WebPayment API*, Browser API*, Permissions API*, Time/Clock API*.
  40. 40. Examples?
  41. 41. 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+
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. 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+
  46. 46. 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...'); } });
  47. 47. 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+
  48. 48. Vibration API Rumble in your pocket! varpattern=[200,100,200,200,100], goodVibration=navigator.vibrate(pattern); Mobile: Android, Firefox Mobile 11+
  49. 49. 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.
  50. 50. 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
  51. 51. 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
  52. 52. *Yawn* Nice... ... but these examples are just.... ... examples
  53. 53. OK Some live examples...
  54. 54. But first... ... some real world examples
  55. 55. BBC News Network Information API Warns when cellular connection detected and video should be played
  56. 56. Firefox Marketplace Network Information API Paying via carrier billing - Cellular detected
  57. 57. Firefox Marketplace 2 Network Information API When WIFI is detected Confirmation code via SMS
  58. 58. Mozilla Reps - Events Geolocation
  59. 59. OK NOW! Some live examples...
  60. 60. Ambient light Ambient Light Demo
  61. 61. Notifications Notifications Demo
  62. 62. And of course: Have FUN! Fun, fun, fun
  63. 63. Install via AppInstall* API AppInstall
  64. 64. And on a Device Video
  65. 65. Conclusion Standards are cool WebAPIs allow us to build cooler web apps WebAPIs are not a "mobile"-thingy The "Web" becomes (more) "native"
  66. 66. Thank you! Carsten Sandtner Slides & Examples: @casarock casarock.github.io

×