Web APIs - Mobiletech Conference 2015

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

Hi My name is
Head of development //mediaman GMBH
Mozilla Rep
Javascript enthusiast and web developer
since 1998.
Carsten Sandtner
@casarock

Web APIs - MobileTech conference 2015 - @casarock
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? 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 2
Mozilla/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 end
Everything 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 others
Other browser vendors raised
They 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 APIs
Vendors 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 APIs
iPhone 2007: No SDK, just HTML5!
A smartphone without a browser? Unbelieveable!
Smartphones pushed HTML5

HTML5 based OS

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

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 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.”

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*,
WebSMS*,

Datamanagement
IndexedDB, Contacts API
FileHandle API*, Device Storage API*,

Hardware access
Light 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?

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+

BBC News
Warns when cellular connection detected
and video should be played

Firefox Marketplace
Paying via carrier billing - Cellular detected

Firefox Marketplace
When WIFI is detected
Conﬁrmation 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!");
}
Desktop: Chrome 5+, Firefox 4+, Opera 25, Safari 6+
Mobile: Firefox Mobile 4+, Firefox OS

Google KEEP
Notifications

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

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+

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 () {
};
battery.onlevelchange = function () {
};
battery.ondischargingtimechange = function () {
};
});
Chrome at least

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+

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+

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

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

Page visibility
The 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?
}
}

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:

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 2015
Service Worker

OK
Some live examples...

Ambient light
Ambient Light Demo

Notifications
Notifications Demo

Battery
Battery API Demo

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

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

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
Slides & Examples: casarock.github.io
Carsten Sandtner

Web APIs - Mobiletech Conference 2015

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Web APIs - Mobiletech Conference 2015

Ähnlich wie Web APIs - Mobiletech Conference 2015 (20)

Mehr von Carsten Sandtner

Mehr von Carsten Sandtner (13)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web APIs - Mobiletech Conference 2015