Web apis JAX 2015 - Mainz
-
Upload
carsten-sandtner -
Category
Technology
-
view
332 -
download
0
Transcript of 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
Web APIs - JAX 2015 - @casarock
The first browser war...
Microsoft vs. Netscape!
Web APIs - JAX 2015 - @casarock
Arms race of featuresEveryone invented new and "better" features!
support other features? Hell, NO!
Web APIs - JAX 2015 - @casarock
And this happened...
Web APIs - JAX 2015 - @casarock
Standards? Which standards?
"We know what you want!"
W3C - ignored...
Web APIs - JAX 2015 - @casarock
And Web Developers?Implemented pretty good browser detection
Web APIs - JAX 2015 - @casarock
And Browser vendors?Browser Vendors wanted to be "supported"
... and this happened:
Web APIs - JAX 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 - JAX 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 - JAX 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 - JAX 2015 - @casarock
At the endEverything is a Mozilla...
Web APIs - JAX 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 - JAX 2015 - @casarock
The second browser war...
The rise of the others
Web APIs - JAX 2015 - @casarock
The othersOther browser vendors raisedThey keep standards in mind and develop
them together
Web APIs - JAX 2015 - @casarock
Standards, everywhere standards!There is not only one "tool" for the internet
Web APIs - JAX 2015 - @casarock
New Feature: Implemented a STANDARD!
Web APIs - JAX 2015 - @casarock
Competition?Still exisits, but:
Performance!Security!
Release cycles!
Web APIs - JAX 2015 - @casarock
Unique characteristic?Add ons, technical features, developer tools etc..
Developers are being targeted.
Web APIs - JAX 2015 - @casarock
“Make the Internet a better place”
Web APIs - JAX 2015 - @casarock
The web Wins!
Web APIs - JAX 2015 - @casarock
The "mobile" Web
Web APIs - JAX 2015 - @casarock
The "real" mobile Web
Web APIs - JAX 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 - JAX 2015 - @casarock
Standards!
Web APIs - JAX 2015 - @casarock
New technologies need new APIsVendors are working together
Service Workers (Google&Mozilla)
Web Components (Google&Mozilla)
WebGL etc.
Web APIs - JAX 2015 - @casarock
“The web is everywhere”
Web APIs - JAX 2015 - @casarock
“The web in your hands”
Web APIs - JAX 2015 - @casarock
Mobiles need new APIsiPhone 2007: No SDK, just HTML5!
A smartphone without a browser? Unbelieveable!
Smartphones pushed HTML5
Web APIs - JAX 2015 - @casarock
HTML5 based OS
Web APIs - JAX 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 - JAX 2015 - @casarock
APIs submitted to W3CAdopted by other mobile browsers ...
... and desktop browsers
more features, more fun!
Web APIs - JAX 2015 - @casarock
Web APIs
tell me more
Web APIs - JAX 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 - JAX 2015 - @casarock
DisclaimerSome WebAPIs are not (yet) a standard
I've marked them with a *
Web APIs - JAX 2015 - @casarock
CategoriesWeb APIs could be categorized
Communication
Datamanagement
Hardware access
"other"
Web APIs - JAX 2015 - @casarock
CommunicationNetwork Information API
Bluetooth*, Mobile Connection API*,Network Stats API*, TCP Socket API*, Telephony*, WebSMS*,
Web APIs - JAX 2015 - @casarock
Datamanagement IndexedDB, Contacts API
FileHandle API*, Device Storage API*,
Web APIs - JAX 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 - JAX 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 - JAX 2015 - @casarock
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+
Web APIs - JAX 2015 - @casarock
BBC NewsNetwork Information API
Warns when cellular connection detected and video should be played
Web APIs - JAX 2015 - @casarock
Firefox MarketplaceNetwork Information API
Paying via carrier billing - Cellular detected
Web APIs - JAX 2015 - @casarock
Firefox MarketplaceNetwork Information API
When WIFI is detected
Confirmation code via SMS
Web APIs - JAX 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!"); }
22+
12+
22+ 25+ 6+
Web APIs - JAX 2015 - @casarock
Google KEEPNotifications
Web APIs - JAX 2015 - @casarock
HEISE.DENotifications
Web APIs - JAX 2015 - @casarock
Light Events
window.ondevicelight = function(event) { // Read out the lux value console.log(event.value); };
Get current ambient light intensity
22+
15+
Web APIs - JAX 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 * 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+
Web APIs - JAX 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); }; });
38+ 25+
39+ 25+
Web APIs - JAX 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
7+ 6+ 11+
6+ 3+ 4.2+
Web APIs - JAX 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.
6+ 11+
6+ 4.2+
Web APIs - JAX 2015 - @casarock
Vibration API
var pattern = [200, 100, 200, 200, 100], goodVibration = navigator.vibrate(pattern);
Rumble in your pocket!
11+
Web APIs - JAX 2015 - @casarock
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+
Web APIs - JAX 2015 - @casarock
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!
Web APIs - JAX 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 - JAX 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 - JAX 2015 - @casarock
Google IO 2015Service Worker
Web APIs - JAX 2015 - @casarock
OKSome live examples...
Web APIs - JAX 2015 - @casarock
Ambient lightAmbient Light Demo
Web APIs - JAX 2015 - @casarock
NotificationsNotifications Demo
Web APIs - JAX 2015 - @casarock
BatteryBattery API Demo
Web APIs - JAX 2015 - @casarock
And of course: Have FUN!Fun, fun, fun
https://www.youtube.com/watch?v=kqvBvIV8mCE
Web APIs - JAX 2015 -
Service Worker
Web APIs - JAX 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"