Web APIs – expand what the Web can do
-
Upload
carsten-sandtner -
Category
Technology
-
view
247 -
download
3
description
Transcript of Web APIs – expand what the Web can do
![Page 1: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/1.jpg)
Web APIsexpand what the web can do...
Carsten Sandtner ( ) 2014 - code.talks 14@casarock
![Page 2: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/2.jpg)
Who am I?Carsten Sandtner
Head of Development at //mediaman GmbHMozilla representative
Javascript enthusiast and web developer since 1998.
![Page 3: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/3.jpg)
![Page 4: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/4.jpg)
![Page 5: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/5.jpg)
The first browser war...
Microsoft vs. Netscape!
![Page 6: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/6.jpg)
Arms race of featuresEveryone invented new and "better" features!
support other features? Hell, NO!
![Page 7: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/7.jpg)
And this happened...
![Page 8: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/8.jpg)
Standards? What standards?W3C - ignored..."We know what you want!"
![Page 9: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/9.jpg)
And Web Developers?Implemented pretty good browser detection
![Page 10: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/10.jpg)
And Browser vendors?Browser Vendors wanted to be "supported"
... and this happened:
![Page 11: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/11.jpg)
Faking User AgentsMosaic/0.9 // grandmother of all!Mozilla/2.02 [fr] (WinNT; I) // Netscapes first!Mozilla/4.0 (compatible; MSIE 4.0; Windows 98) // IE4!
Funny? There is more...
![Page 12: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/12.jpg)
Faking User Agents - part 2Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11 // Firefox!Mozilla/5.0 (compatible; Konqueror/Version; OS-or-CPU) KHTML/KHTMLVersion (like Gecko) // KonquerorMozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (KHTML, like Gecko) Safari/125.1 // Safari!
And Chrome?Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13
But Opera?Opera/8.0 (Windows NT 5.1; U; en)
<9 ... >9 has...Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.50Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36 OPR/15.0.1147.153
*sigh*
![Page 13: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/13.jpg)
At the end: Everything is aMozilla...
and Internet Explorer won the first browser war
![Page 14: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/14.jpg)
Internet Explorer wonDevelopment stopped for 5 years!"Optimized for IE 6!"Standards? IE was the standard!
![Page 15: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/15.jpg)
The second browser war...
The rise of the others
![Page 16: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/16.jpg)
The othersOther browser vendors raised
They keep standards in mind and develop them togetherMozilla (Firefox)KonquerorSafariOperaChrome
![Page 17: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/17.jpg)
Standards, everywhere standards!There is not only one "tool" for the internet
![Page 18: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/18.jpg)
New Feature: Implemented a STANDARD!
![Page 19: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/19.jpg)
Competition?Still exisits, but:Performance!Security!Release cycles!
![Page 20: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/20.jpg)
BenchmarksStandardized
![Page 21: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/21.jpg)
Unique characteristic?Add ons, technical features, developer tools etc..
Developers are being targeted.
![Page 22: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/22.jpg)
“Make the Internet a better place”
![Page 23: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/23.jpg)
The web won!
![Page 24: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/24.jpg)
The "mobile" Web
eh? no.
![Page 25: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/25.jpg)
The "real" mobile Web
![Page 26: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/26.jpg)
Everything changes...We want ...
... access to hardware features
... access Calendar, Addressbooketc.
We got it!But: Lessons learned from the past
Standards!
![Page 27: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/27.jpg)
New technologies need newAPIs
Vendors work togetherService Workers (Google&Mozilla)Web Components (Google&Mozilla)WebGL etc.
![Page 28: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/28.jpg)
“The web is everywhere”
![Page 29: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/29.jpg)
“The web in your hands”
![Page 30: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/30.jpg)
Mobiles need new APIsiPhone 2007: No SDK, just HTML5!A smartphone without a browser? Unbelieveable!Smartphones pushed HTML5
![Page 31: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/31.jpg)
HTML5 based OS
![Page 32: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/32.jpg)
HTML5 OS needs new APIsFirefox OS is open source and with standards in mind
Mozilla introduced new APIs for mobile devicesConsistent use of APIs
![Page 33: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/33.jpg)
APIs submitted to W3CAdopted by other mobile browsers ...
... and desktop browsers
more features, more fun!
![Page 34: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/34.jpg)
Web APIstell me more
![Page 35: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/35.jpg)
Definition“WebAPI is a term used to refer to a suite of devicecompatibility and access APIs that allow Web apps
and content to access device hardware (such asbattery status or the device vibration hardware), as
well as access to data stored on the device (such asthe calendar or contacts list).
By adding these APIs, we hope to expand what theWeb can do today and only proprietary platforms
were able to do in the past.”
![Page 36: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/36.jpg)
DisclaimerSome WebAPIs are not (yet) a standard
I've marked them with a *
![Page 37: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/37.jpg)
CategoriesWeb APIs could be categorized
CommunicationDatamanagementHardware access"other"
![Page 38: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/38.jpg)
CommunicationNetwork Information API.
Bluetooth*, Mobile Connection API*, Network Stats API*, TCP SocketAPI*, Telephony*, WebSMS*, WiFi Information API*.
![Page 39: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/39.jpg)
DatamanagementIndexedDB, Contacts API.
FileHandle API*, Device Storage API*, Settings API*.
![Page 40: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/40.jpg)
Hardware accessLight events, Battery status, Geolocation, Pointer Lock, Proximity,Device orientation, Screen orientation, Vibration API.
WebFM API*, Camera API*, Power Management API*.
![Page 41: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/41.jpg)
"Other"Alarm API, Simple Push API, Web Notifications, Idle API.
Apps API*, Web Activities*, WebPayment API*, Browser API*,Permissions API*, Time/Clock API*.
![Page 42: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/42.jpg)
Examples?
![Page 43: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/43.jpg)
Network ConnectionInformation about the system's connection
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;var type = connection.type;
function updateConnectionStatus() { console.log("Connection type is change from " + type + " to " + connection.type); type = connection.type;}
connection.addEventListener('typechange', updateConnectionStatus);
Firefox 12+, Firefox Mobile, Firefox OS, Android 2.2+
![Page 44: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/44.jpg)
IndexedDB“IndexedDB is an API for client-side storage of
significant amounts of structured data and for highperformance 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 mobilebrowser ...
... excepted: Safari on iOS < 8
![Page 45: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/45.jpg)
Notification// At first, let's check if we have permission for notification// If not, let's ask for itif (Notification && Notification.permission !== "granted") { Notification.requestPermission(function (status) { if (Notification.permission !== status) { Notification.permission = status; }});}
if (Notification && Notification.permission === "granted") { var n = new Notification("Hi!");}
Notify me!
Desktop: Chrome 5+, Firefox 4+, Opera 25, Safari 6+Mobile: Firefox Mobile 4+, Firefox OS
![Page 46: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/46.jpg)
Light EventsGet current ambient light intensity
window.ondevicelight = function (event) { // Read out the lux value console.log(event.value);};
Current lux: 0Desktop: Firefox 22+
Mobile: Firefox Mobile
![Page 47: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/47.jpg)
Battery StatusInformation about the system's battery charge level and lets you be
notified by events that are sent when the battery level changesvar battery = 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) };
function updateBatteryStatus() { 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+
![Page 48: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/48.jpg)
Proximity EventsThe proximity events are a handy way to know when a user is close to a
devicewindow.addEventListener('userproximity', function(event) { if (event.near) { console.log('Phone probably on users ear...'); } else { console.log('phone in your hand...'); }});
![Page 49: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/49.jpg)
Detecting device orientationDetection orientation and motion events
window.addEventListener("deviceorientation", handleOrientation, true);
function handleOrientation(event) { var alpha = event.alpha; // Z-Axis var beta = event.beta; // Y-Axis var gamma = event.gamma; // X-Axis
// Do stuff with the new orientation data}
window.addEventListener("devicemotion", handleMotion, true);
function handleMotion(event) { var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; var r = event.rotationRate;}
Information about the speed of changes for the device's position andorientation.
Desktop: Chrome 7+, 3.6+Mobile: Android 3.0, Firefox Mobile 3.6+, Safari Mobile 4.2+
![Page 50: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/50.jpg)
Vibration APIRumble in your pocket!
var pattern = [200, 100, 200, 200, 100],goodVibration = navigator.vibrate(pattern);
Mobile: Android, Firefox Mobile 11+
![Page 51: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/51.jpg)
Screen orientationListening orientation change
screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation);});
Preventing orientation changescreen.lockOrientation('landscape');
Support is complex: This API is experimental and currently available onFirefox OS and Firefox for Android with a moz prefix, and for Internet
Explorer on Windows 8.1 and above with a ms prefix.
![Page 52: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/52.jpg)
Pointer LockRequest pointer lock on an element
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;canvas.requestPointerLock();
Listen for changesdocument.addEventListener('pointerlockchange', lockChangeAlert, false);document.addEventListener('mozpointerlockchange', lockChangeAlert, false);document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);
Exit pointer lockdocument.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock || document.webkitExitPointerLock;
// Attempt to unlockdocument.exitPointerLock();
Desktop: Chrome, Firefox
![Page 53: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/53.jpg)
Page visibilityThe Page Visibility API lets you know when a webpage is visible or in
focusif (document.hidden) { // stop video etc.}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
function handleVisibilityChange() { if (document.hidden) { // stop something. e.g. stop a video, audio etc... } else { // do something else ;) play video, audio... you got it? }}
Currently prefixed (moz, webkit, ms)Desktop: Chrome, Firefox 30+, Safari 7+, Opera 24+, IE10+
Mobile: Chrome Android, Android 4.4+, Firefox Mobile, Firefox OS
![Page 54: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/54.jpg)
*Yawn* Nice...
... but these examples are just....... examples
![Page 55: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/55.jpg)
OKSome live examples...
![Page 56: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/56.jpg)
But first...... some real world examples
![Page 57: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/57.jpg)
BBC NewsNetwork Information API
Warns when cellular connection detected and video should be played
![Page 58: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/58.jpg)
Firefox MarketplaceNetwork Information API
Paying via carrier billing - Cellular detected
![Page 59: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/59.jpg)
Firefox Marketplace 2Network Information API
When WIFI is detected
Confirmation code via SMS
![Page 60: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/60.jpg)
Mozilla Reps - EventsGeolocation
![Page 61: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/61.jpg)
OKNOW! Some live examples...
![Page 67: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/67.jpg)
ConclusionStandards are coolWebAPIs allow us to build cooler web appsWebAPIs are not a "mobile"-thingyThe "Web" becomes (more) "native"
![Page 68: Web APIs – expand what the Web can do](https://reader031.fdocuments.net/reader031/viewer/2022020218/55896511d8b42aa74b8b466f/html5/thumbnails/68.jpg)
Thank you!Carsten Sandtner
Slides & Examples:
@casarock
casarock.github.io