web apis - mobiletech conference 2015
TRANSCRIPT
Hi My name is
Head of development //mediaman GMBHMozilla Rep
Javascript enthusiast and web developer since 1998.
Carsten Sandtner@casarock
Web APIs - MobileTech conference 2015 - @casarock
Arms race of featuresEveryone invented new and "better" features!
support other features? Hell, NO!
Web APIs - MobileTech conference 2015 - @casarock
Standards? Which standards?
"We know what you want!"
W3C - ignored...
Web APIs - MobileTech conference 2015 - @casarock
And Web Developers?Implemented pretty good browser detection
Web APIs - MobileTech conference 2015 - @casarock
And Browser vendors?Browser Vendors wanted to be "supported"
... and this happened:
Web APIs - MobileTech conference 2015 - @casarock
Faking User Agents
Mosaic/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 are more…
Web APIs - MobileTech conference 2015 - @casarock
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) // Konqueror Mozilla/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)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; en) Opera 9.50 Mozilla/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
Web APIs - MobileTech conference 2015 - @casarock
Faking User Agents - the End
And Spartan?
Mozilla/5.0 (Windows NT 6.4; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 Edge/12.0
Web APIs - MobileTech conference 2015 - @casarock
and Internet Explorer won the first browser war
Development stopped for 5 years!
"Optimized for IE 6!"
Standards? IE was the standard!
Web APIs - MobileTech conference 2015 - @casarock
The othersOther browser vendors raisedThey keep standards in mind and develop
them together
Web APIs - MobileTech conference 2015 - @casarock
Standards, everywhere standards!There is not only one "tool" for the internet
Web APIs - MobileTech conference 2015 - @casarock
Competition?Still exisits, but:
Performance!Security!
Release cycles!
Web APIs - MobileTech conference 2015 - @casarock
Unique characteristic?Add ons, technical features, developer tools etc..
Developers are being targeted.
Web APIs - MobileTech conference 2015 - @casarock
Everything changes...Web developers want ...
... access to hardware features
... access Calendar, Addressbook
etc.
We got it!
But: Lessons learned from the past
Web APIs - MobileTech conference 2015 - @casarock
New technologies need new APIsVendors are working together
Service Workers (Google&Mozilla)
Web Components (Google&Mozilla)
WebGL etc.
Web APIs - MobileTech conference 2015 - @casarock
Mobiles need new APIsiPhone 2007: No SDK, just HTML5!
A smartphone without a browser? Unbelieveable!
Smartphones pushed HTML5
Web APIs - MobileTech conference 2015 - @casarock
HTML5 OS needs new APIsFirefox OS is open source and with standards in mind
Mozilla introduced new APIs for mobile devices
Consistent use of APIs
Web APIs - MobileTech conference 2015 - @casarock
APIs submitted to W3CAdopted by other mobile browsers ...
... and desktop browsers
more features, more fun!
Web APIs - MobileTech conference 2015 - @casarock
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.”
Web APIs - MobileTech conference 2015 - @casarock
DisclaimerSome WebAPIs are not (yet) a standard
I've marked them with a *
Web APIs - MobileTech conference 2015 - @casarock
CategoriesWeb APIs could be categorized
Communication
Datamanagement
Hardware access
"other"
Web APIs - MobileTech conference 2015 - @casarock
CommunicationNetwork Information API
Bluetooth*, Mobile Connection API*,Network Stats API*, TCP Socket API*, Telephony*, WebSMS*,
Web APIs - MobileTech conference 2015 - @casarock
Datamanagement IndexedDB, Contacts API
FileHandle API*, Device Storage API*,
Web APIs - MobileTech conference 2015 - @casarock
Hardware accessLight events, Battery status, Geolocation, Pointer Lock,
Proximity, Device orientation, Screen orientation, Vibration API
WebFM API*, Camera API*, Power Management API*
Web APIs - MobileTech conference 2015 - @casarock
"Other"Alarm API, Push API, Web Notifications, Service Worker
Apps API*, Web Activities*, WebPayment API*, Browser API*, Permissions API*, Time/Clock API*
Web APIs - MobileTech conference 2015 - @casarock
Network 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);
Information about the system's connection
Firefox 12+, Firefox Mobile, Firefox OS, Android 2.2+
Web APIs - MobileTech conference 2015 - @casarock
BBC NewsNetwork Information API
Warns when cellular connection detected and video should be played
Web APIs - MobileTech conference 2015 - @casarock
Firefox MarketplaceNetwork Information API
Paying via carrier billing - Cellular detected
Web APIs - MobileTech conference 2015 - @casarock
Firefox MarketplaceNetwork Information API
When WIFI is detected
Confirmation code via SMS
Web APIs - MobileTech conference 2015 - @casarock
Notification// At first, let's check if we have permission for notification // If not, let's ask for it if (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!"); }
Desktop: Chrome 5+, Firefox 4+, Opera 25, Safari 6+ Mobile: Firefox Mobile 4+, Firefox OS
Web APIs - MobileTech conference 2015 - @casarock
Light Events
window.ondevicelight = function(event) { // Read out the lux value console.log(event.value); };
Get current ambient light intensity
Desktop: Firefox 22+ Mobile: Firefox Mobile
Web APIs - MobileTech conference 2015 - @casarock
Battery Status (old)
var 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 * 1 00) };
function updateBatteryStatus() { batterylevel.innerHTML = battery.level * 100 + " %"; batterystatus.innerHTML = battery.charging ? "" : "not"; }
battery.addEventListener("chargingchange", updateBatteryStatus); battery.addEventListener("levelchange", updateBatteryStatus);
Information about the system's battery charge level and lets you be notified by events that are sent when the battery level changes
Desktop: Firefox 10+ Mobile: Firefox Mobile 10+
Web APIs - MobileTech conference 2015 - @casarock
Battery Status (NEW) function updateBatteryStatus(battery) {
// do stuff }
navigator.getBattery().then(function(battery) { // Update the battery status initially when the promise resolves ... updateBatteryStatus(battery);
// .. and for any subsequent updates. battery.onchargingchange = function () { updateBatteryStatus(battery); };
battery.onlevelchange = function () { updateBatteryStatus(battery); };
battery.ondischargingtimechange = function () { updateBatteryStatus(battery); }; });
Chrome at least
Web APIs - MobileTech conference 2015 - @casarock
Detecting device orientation
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 }
Detection orientation and motion events
Desktop: Chrome 7+, 3.6+ Mobile: Android 3.0, Firefox Mobile 3.6+, Safari Mobile 4.2+
Web APIs - MobileTech conference 2015 - @casarock
Detecting device orientation
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 and orientation.
Desktop: Chrome 7+, 3.6+ Mobile: Android 3.0, Firefox Mobile 3.6+, Safari Mobile 4.2+
Web APIs - MobileTech conference 2015 - @casarock
Vibration API
var pattern = [200, 100, 200, 200, 100], goodVibration = navigator.vibrate(pattern);
Rumble in your pocket!
Mobile: Android, Firefox Mobile 11+
Web APIs - MobileTech conference 2015 - @casarock
Screen orientation
screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation); });
Listening orientation change
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.
screen.lockOrientation('landscape');
Preventing orientation change
Web APIs - MobileTech conference 2015 - @casarock
Page visibilityThe Page Visibility API lets you know when a webpage is visible or
in focus
Desktop: Chrome, Firefox 30+, Safari 7+, Opera 24+, IE10+ Mobile: Chrome Android, Android 4.4+, Firefox Mobile, Firefox OS
if (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? } }
Web APIs - MobileTech conference 2015 - @casarock
Service Workers
navigator.serviceWorker.register('/myworker.js').then(function(reg) { console.log('Registered', reg); }, function(err) { console.log('Error', err); });
ServiceWorker is a background worker. It is complex. This is a simplified explanation!
Desktop: Mobile:
Web APIs - MobileTech conference 2015 - @casarock
Service Workers cont.
console.log("started"); self.addEventListener('install', function(event) { console.log("installed"); });
self.addEventListener('activate', function(event) { console.log("activated"); });
self.addEventListener('fetch', function(event) { console.log("fetch"); event.respondWith(new Response("My response!!")); });
myworker.js
Web APIs - MobileTech conference 2015 - @casarock
Service Workers caching
importScripts('serviceworker-cache-polyfill.js');
self.addEventListener('install', function(event) { event.waitUntil( caches.open('name-my-cache-v1').then(function(cache) { return cache.addAll([ '/', '/styles/all.css', '/imgs/myimg.png', '/scripts/awesome.js' ]); }) ) });
self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).then(function(response) { return response || fetch(event.request); }) ); });
cache some stuff.
Web APIs - MobileTech conference 2015 - @casarock
Conclusion
Standards are cool!WebAPIs allow us to build cooler web apps
WebAPIs are not a "mobile"-thingy!The "Web" becomes (more) "native"