APICON 2017: State of Web APIs

My Slides for my talk @APICON 2017 in Berlin. State of Web APIs.

Transcript

1. STATE OF WEB APIS Carsten Sandtner // @casarock // #APICON // Berlin
2. CARSTEN SANDTNER @CASAROCK
6. THE WEB
7. BROWSER WARS
8. BROWSER WARS 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! Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36
9. BROWSER DETECTION https://flic.kr/p/49DTbL
10. BROWSER WARS BROWSER DETECTION function lib_bwcheck() { this.ver = navigator.appVersion this.agent = navigator.userAgent this.dom = document.getElementById ? 1 : 0 this.opera5 = this.agent.indexOf("Opera 5") > -1 this.ie5 = (this.ver.indexOf("MSIE 5") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0; this.ie6 = (this.ver.indexOf("MSIE 6") > -1 !&& this.dom !&& !this.opera5) ? 1 : 0; this.ie4 = (document.all !&& !this.dom !&& !this.opera5) ? 1 : 0; this.ie = this.ie4 !|| this.ie5 !|| this.ie6 this.mac = this.agent.indexOf("Mac") > -1 this.ns6 = (this.dom !&& parseInt(this.ver) !>= 5) ? 1 : 0; this.ns4 = (document.layers !&& !this.dom) ? 1 : 0; this.bw = (this.ie6 !|| this.ie5 !|| this.ie4 !|| this.ns4 !|| this.ns6 !|| this.opera5) return this }
11. STANDARDS! https://flic.kr/p/6K9jC4
12. OPEN MATTERS! https://flic.kr/p/gbx9w
13. MOBILE WEB
14. WEB VS. NATIVE
15. https://flic.kr/p/fgpFpP
16. https://pixabay.com/photo-1572617/
17. AUG. 2017: ~65% WEBPAGE VIEWS GENERATED VIA MOBILE. Asia
18. AUG. 2017: ~60% WEBPAGE VIEWS GENERATED VIA MOBILE. Africa
19. NORTHERN AMERICA HAS ABOUT 37% AND EUROPE AT LEAST 32%.
20. DON’T LOCK THEM OUT! https://flic.kr/p/4ASX2S
21. NEW APIS FOR MOBILE WEB
23. THERE IS MORE THAN MOBILE WEB!
24. FIREFOX OS IS A DISCONTINUED OPEN- SOURCE OPERATING SYSTEM – MADE FOR SMARTPHONES, TABLET COMPUTERS AND SMART TVS
25. WEB APPS ARE MAINSTREAM
26. PWA
27. API
28. 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 […], AS WELL AS ACCESS TO DATA STORED ON THE DEVICE MDN HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEBAPI
29. ANIMATIONS
30. WEB ANIMATION API
31. PURE CSS CSS3 ANIMATION #alice { animation: aliceTumbling infinite 3s linear; } @keyframes aliceTumbling { 0% { color: #000; transform: rotate(0) translate3D(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; transform: rotate(360deg) translate3D(-50%, -50%, 0); } }
32. WEB ANIMATION API ANIMATION USING WEB ANIMATION API var aliceTumbling = [ { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.333}, { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' } ]; var aliceTiming = { duration: 3000, iterations: Infinity }; var aliceAnimated = document.getElementById("alice").animate( aliceTumbling, aliceTiming );
33. WEB ANIMATION API CONTROL YOUR ANIMATION aliceAnimated.pause(); aliceAnimated.play();
34. CURRENTLY WORKING DRAFT! Supported by Chrome 39+ and Firefox 48+ STATUS
36. WEB APIS WHICH … SHOULD ALREADY BE KNOWN // Geolocation // IndexedDB // Storage (Local-/SessionStarage) // Notifications API
37. GAMEPAD & POINTER LOCK https://flic.kr/p/7BeYGK
38. VIBRATION HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/VIBRATION_API https://flic.kr/p/akrgGg
39. VIBRATIONS API GOOD VIBRATIONS… let duration = [ 200, !// vibrate 200ms 100, !// pause 100ms 200 !// vibrate 200ms ]; window.navigator.vibrate(duration);
40. W3C RECOMMENDATION Supported by Chrome and Firefox but not iOS
41. BATTERY STATUS HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/BATTERY_STATUS_API https://flic.kr/p/hNcMN
42. BATTERY STATUS API BATTERY STATUS navigator.getBattery().then(function (battery) { battery.addEventListener('chargingchange', function () { console.log("charging? " + (battery.charging ? "Yes" : "No")); }); battery.addEventListener('levelchange', function () { console.log("level: " + battery.level * 100 + "%"); }); battery.addEventListener('chargingtimechange', function () { console.log("charging time: " + battery.chargingTime + " seconds"); }); battery.addEventListener('dischargingtimechange', function () { console.log("discharging time: " + battery.dischargingTime + " seconds"); }); });
43. W3C CANDIDATE RECOMMENDATION Supported by Chrome and Firefox but will possibly being removed due abuse
44. AMBIENT LIGHT HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS https://flic.kr/p/4zNmSX
45. LIGHT EVENTS AMBIENT LIGHT window.addEventListener("devicelight", function (event) { var luminosity = event.value; console.log(luminosity); });
46. EDITORS DRAFT Supported by Firefox and Chrome for Android HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS
47. NETWORK INFORMATION HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/NETWORK_INFORMATION_API https://flic.kr/p/peQyWU
48. NETWORK CONNECTION API NETWORK CONNECTION var connection = navigator.connection !|| navigator.mozConnection !|| navigator.webkitConnection; var type = connection.type; function updateConnectionStatus() { console.log("Connection type changed " + type + " !-> " + connection.type); } connection.addEventListener('typechange', updateConnectionStatus);
49. EDITORS DRAFT Supported by Firefox mobile and Chrome for Android
50. DEVICE ORIENTATION & DEVICE MOTION HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/DETECTING_DEVICE_ORIENTATION By Svjo (Own work) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons
51. DEVICE ORIENTATION AND MOTION DEVICE ORIENTATION window.addEventListener("deviceorientation", handleOrientation, true); function handleOrientation(event) { var absolute = event.absolute; var alpha = event.alpha; var beta = event.beta; var gamma = event.gamma; !// Do stuff with the new orientation data }
52. DEVICE ORIENTATION AND MOTION DEVICE MOTION window.addEventListener("devicemotion", handleMotion, true); function handleMotion(event) { console.log(event.acceleration.x + ' m/s2'); !// more stuff }
53. W3C WORKING DRAFT Supported by Chrome, Edge, Firefox and Safari mobile
54. WEB AUDIO HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_AUDIO_API https://flic.kr/p/7XqtJP
55. WEB AUDIO API TYPICAL WORKFLOW // Create audio context // Inside the context, create sources — such as <audio>, oscillator, stream // Create effects nodes, such as reverb, biquad filter, panner, compressor // Choose final destination of audio, for example your system speakers // Connect the sources up to the effects, and the effects to the destination.
57. WEB AUDIO GREAT RESOURCES // Talk: // https://fronteers.nl/congres/2015/sessions/hands- on-web-audio-soledad-penades // Links: // https://developer.mozilla.org/en-US/docs/Web/ API/Web_Audio_API // https://github.com/notthetup/awesome-webaudio // Awesome use case: // https://learningmusic.ableton.com/index.html
58. W3C WORKING DRAFT Supported by every major platform at desktop and mobile
59. WEB MIDI HTTPS://WWW.W3.ORG/TR/WEBMIDI/ https://flic.kr/p/4fJGT
60. WEB MIDI WEB MIDI API navigator.requestMIDIAccess() .then(function(access) { // Get lists of available MIDI controllers const inputs = access.inputs.values(); const outputs = access.outputs.values(); access.onstatechange = function(e) { // Print information about the (dis)connected MIDI controller console.log(e.port.name, e.port.manufacturer, e.port.state); }; });
61. W3C WORKING DRAFT Supported by Chrome
62. WEBVR HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/WEBVR_API
63. WEBVR WEBVR APIS // Navigator.getVRDevices // VRDevice/HMDVRDevice // PositionSensorVRDevice // VRPositionState // VREyeParameters // VRFieldOfView/VRFieldOfViewReadOnly
64. WEBVR WEBVR USING AFRAME.IO <!DOCTYPE html> <html> <head> <title>Hello, WebVR! - A-Frame!</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https:!//aframe.io/releases/0.5.0/aframe.min.js">!</script> !</head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9">!</a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E">!</a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D">!</a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4">!</a-plane> <a-sky color="#ECECEC">!</a-sky> !</a-scene> !</body> !</html>
66. EDITORS DRAFT Supported by Firefox and Chrome
67. SERVICE WORKERS & PUSH APIS HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/SERVICE_WORKER_API
68. ☁ Internet Service Worker Cache 1 2 3 3
69. ☁ Internet Service Worker Cache 5 3 2 4 1
70. ☁ Internet Service Worker Cache ❌ 1 2 3 4
71. SERVICE WORKERS REGISTER SERVICE WORKER if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }) .then(function (reg) { !// registration worked console.log('Registration succeeded. Scope is ' + reg.scope); }).catch(function (error) { !// registration failed console.log('Registration failed with ' + error); }); }
72. SERVICE WORKERS IMPLEMENT SERVICE WORKER 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!!!")); });
73. PUSH APIS
74. W3C WORKING DRAFT Supported by Firefox and Chrome
75. BE PROGRESSIVE!
76. WEB BLUETOOTH HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_BLUETOOTH_API
77. WEB BLUETOOTH BLUETOOTH navigator.bluetooth.requestDevice({ filters: [{ services: ['battery_service'] }] }) .then(device !=> device.gatt.connect()) .then(server !=> { !// Getting Battery Service!!... return server.getPrimaryService('battery_service'); }) .then(service !=> { !// Getting Battery Level Characteristic!!... return service.getCharacteristic('battery_level'); }) .then(characteristic !=> { !// Reading Battery Level!!... return characteristic.readValue(); }) .then(value !=> { console.log('Battery percentage is ' + value.getUint8(0)); }) .catch(error !=> { console.log(error); });
78. DRAFT Supported by Chrome (behind a flag)
79. WEB SPEECH HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_SPEECH_API https://flic.kr/p/5EWHJ4
80. WEB SPEECH SPEECH SYNTHESIS var msg = new SpeechSynthesisUtterance('Hi there.'); msg.onstart = function () { }; msg.onend = function () { }; window.speechSynthesis.speak(msg);
81. WEB SPEECH SPEECH RECOGNITION var recognition = new webkitSpeechRecognition(); recognition.continuous = true; !// keep processing input until stopped recognition.interimResults = true; !// show interim results recognition.lang = 'de-DE'; !// specify the language recognition.onstart = function () { }; recognition.onerror = function (event) { }; recognition.onend = function () { }; recognition.onresult = function (event) { var interimTranscript = ''; for (var i = event.resultIndex; i < event.results.length; !++i) { if (event.results[i].isFinal) { finalTranscript += event.results[i][0].transcript; } else { interimTranscript += event.results[i][0].transcript; } } }; recognition.onspeechend = function () { }
82. DRAFT Supported by Chrome (prefixed) and Firefox (behind a flag)
83. SHAPE DETECTION HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/
84. SHAPE DETECTION FACE DETECTION let faceDetector = new FaceDetector({ fastMode: true, maxDetectedFaces: 1 }); !// Assuming |theImage| is e.g. a <img> content, or a Blob. faceDetector.detect(theImage) .then(detectedFaces !=> { for (const face of detectedFaces) { console.log('Face @ (${face.boundingBox.x}, ${face.boundingBox.y}),' + ' size ${face.boundingBox.width}x${face.boundingBox.height}'); } }).catch(() !=> { console.error("Face Detection failed, boo."); })
85. SHAPE DETECTION TEXT DETECTION let textDetector = new TextDetector(); !// Assuming |theImage| is e.g. a <img> content, or a Blob. textDetector.detect(theImage) .then(detectedTextBlocks !=> { for (const textBlock of detectedTextBlocks) { console.log( 'text @ (${textBlock.boundingBox.x}, ${textBlock.boundingBox.y}), ' + 'size ${textBlock.boundingBox.width}x$ {textBlock.boundingBox.height}'); } }).catch(() !=> { console.error("Text Detection failed, boo."); })
86. SHAPE DETECTION BARCODE DETECTION let barcodeDetector = new BarcodeDetector(); !// Assuming |theImage| is e.g. a <img> content, or a Blob. barcodeDetector.detect(theImage) .then(detectedCodes !=> { for (const barcode of detectedCodes) { console.log(' Barcode ${barcode.rawValue}' + ' @ (${barcode.boundingBox.x}, ${barcode.boundingBox.y}) with size' + ' ${barcode.boundingBox.width}x${barcode.boundingBox.height}'); } }).catch(() !=> { console.error("Barcode Detection failed, boo."); })
87. DRAFT Supported by Chrome HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/
88. APART FROM WEB
89. SENSORS https://flic.kr/p/adQqaY
90. CREATE A COMMON API FOR DEVICE SENSORS Device and Sensors Working Group
92. THE “WEB OF THINGS” (WOT) IS THE IDEA OF TAKING THE LESSONS LEARNED FROM THE WORLD WIDE WEB AND APPLYING THEM TO IOT.
93. WEB THING API HTTP://IOT.MOZILLA.ORG/ https://flic.kr/p/adQqaY
94. PROJECT THINGS GET INVOLVED // Build a Web Thing: // http://iot.mozilla.org/wot/ // Create an adapter: // https://github.com/mozilla-iot/gateway/tree/master/src/adapters // Hack on Project Things  // https://github.com/mozilla-iot
95. WHAT’S COMING?
96. WEBUSB https://flic.kr/p/iSrCYX
97. WEB SHARE API https://flic.kr/p/iSrCYX
98. PAYMENT https://flic.kr/p/bf45dn
99. WEB CRYPTO https://flic.kr/p/5hXtw5
100. PRESENTATION API
101. REMOTE PLAYBACK https://flic.kr/p/5Psjeu
102. APIS EVOLVED
103. FROM DEVICE- CENTRIC TO OFFLINE
105. SENSORS https://flic.kr/p/BF4bzN
106. THANK YOU! CARSTEN SANDTNER @CASAROCK