Web apis JAX 2015 - Mainz

The web becomes more „native“ Carsten Sandtner (@casarock)

WEBAPIs

Hi My name is

Head of development //mediaman GMBHMozilla Rep

Javascript enthusiast and web developer since 1998.

Carsten Sandtner@casarock

https://flic.kr/p/a5WzoV

https://flic.kr/p/a5WzoV

Web APIs - JAX 2015 - @casarock

The first browser war...

Microsoft vs. Netscape!


Arms race of featuresEveryone invented new and "better" features!

support other features? Hell, NO!


And this happened...


Standards? Which standards?

"We know what you want!"

W3C - ignored...


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 // 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…


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


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


At the endEverything is a Mozilla...


and Internet Explorer won the first browser war

Development stopped for 5 years!

"Optimized for IE 6!"

Standards? IE was the standard!


The second browser war...

The rise of the others


The othersOther browser vendors raisedThey keep standards in mind and develop

them together


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!


Unique characteristic?Add ons, technical features, developer tools etc..

Developers are being targeted.


“Make the Internet a better place”


The web Wins!


The "mobile" Web


The "real" mobile Web


Everything changes...Web developers want ...

... access to hardware features

... access Calendar, Addressbook

etc.

We got it!

But: Lessons learned from the past


Standards!


New technologies need new APIsVendors are working together

Service Workers (Google&Mozilla)

Web Components (Google&Mozilla)

WebGL etc.


“The web is everywhere”


“The web in your hands”


Mobiles need new APIsiPhone 2007: No SDK, just HTML5!

A smartphone without a browser? Unbelieveable!

Smartphones pushed HTML5


HTML5 based OS


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


APIs submitted to W3CAdopted 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 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.”


DisclaimerSome WebAPIs are not (yet) a standard

I've marked them with a *


CategoriesWeb APIs could be categorized

Communication

Datamanagement

Hardware access

"other"


CommunicationNetwork Information API

Bluetooth*, Mobile Connection API*,Network Stats API*, TCP Socket API*, Telephony*, WebSMS*,


Datamanagement IndexedDB, Contacts API

FileHandle API*, Device Storage API*,


Hardware accessLight events, Battery status, Geolocation, Pointer Lock,

Proximity, Device orientation, Screen orientation, Vibration API

WebFM API*, Camera API*, Power Management API*


"Other"Alarm API, Push API, Web Notifications, Service Worker

Apps API*, Web Activities*, WebPayment API*, Browser API*, Permissions API*, Time/Clock API*


Examples?

Web APIs - JAX

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

12+

12+ 2.2+


BBC NewsNetwork Information API

Warns when cellular connection detected and video should be played


Firefox MarketplaceNetwork Information API

Paying via carrier billing - Cellular detected


Firefox MarketplaceNetwork Information API

When WIFI is detected

Confirmation code via SMS


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!"); }

22+

12+

22+ 25+ 6+


Google KEEPNotifications


HEISE.DENotifications


Light Events

window.ondevicelight = function(event) { // Read out the lux value console.log(event.value); };

Get current ambient light intensity

22+

15+


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 * 100) };

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

16+

16+


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); }; });

38+ 25+

39+ 25+


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

7+ 6+ 11+

6+ 3+ 4.2+


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.

6+ 11+

6+ 4.2+


Vibration API

var pattern = [200, 100, 200, 200, 100], goodVibration = navigator.vibrate(pattern);

Rumble in your pocket!

11+


Screen orientation

screen.addEventListener("orientationchange", function () { console.log("The orientation of the screen is: " + screen.orientation); });

Listening orientation change

screen.lockOrientation('landscape');

Preventing orientation change

38+ 11+ 25+

39+


Page visibilityThe Page Visibility API lets you know when a webpage is visible or

in focus

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? } }

33+ 10+ 12.10+18+ 7+

12.10+10+ 7+ 4.4+18+

BetaWeb APIs - JAX 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!


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


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.


Google IO 2015Service Worker


OKSome live examples...


Ambient lightAmbient Light Demo


NotificationsNotifications Demo


BatteryBattery API Demo


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

https://www.youtube.com/watch?v=kqvBvIV8mCE

https://www.youtube.com/watch?v=kqvBvIV8mCE

Web APIs - JAX 2015 -

Service Worker


Conclusion

Standards are cool!WebAPIs allow us to build cooler web apps

WebAPIs are not a "mobile"-thingy!The "Web" becomes (more) "native"

Thank you!@casarock

[email protected] & Examples: casarock.github.io

Carsten Sandtner

mailto:[email protected]

Technology

Web apis JAX 2015 - Mainz