State of Web APIs 2017

The slides for my talk at International PHP Conference in Berlin 2017.

Transcript

1. STATE OF WEB APIS 2017 Carsten Sandtner // @casarock // #IPC2017 // Berlin 05/31/2017
2. CARSTEN SANDTNER @CASAROCK
3. MEDIAMAN
4. THE WEB
5. BROWSER WARS
6. 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
7. BROWSER DETECTION https://flic.kr/p/49DTbL
8. 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 }
9. STANDARDS! https://flic.kr/p/6K9jC4
10. OPEN MATTERS! https://flic.kr/p/gbx9w
12. FIREFOX OS IS A DISCONTINUED OPEN- SOURCE OPERATING SYSTEM – MADE FOR SMARTPHONES, TABLET COMPUTERS AND SMART TVS
13. MOBILE WEB
14. WEB VS. NATIVE
15. https://flic.kr/p/fgpFpP
16. ASIA https://flic.kr/p/7HbZiF
17. FEB. 2017: ~65% WEBPAGE VIEWS GENERATED VIA MOBILE. Asia
18. AFRICA https://flic.kr/p/raHxmo
19. FEB. 2017: ~60% WEBPAGE VIEWS GENERATED VIA MOBILE. Africa
20. DON’T LOCK THEM OUT! https://flic.kr/p/4ASX2S
21. NEW APIS FOR MOBILE WEB
22. THERE IS MORE THAN MOBILE WEB!
23. WEB APPS ARE MAINSTREAM
24. PWA
25. API
26. 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
27. ANIMATIONS
28. WEB ANIMATION API
29. 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); } }
30. 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 );
31. WEB ANIMATION API CONTROL YOUR ANIMATION aliceAnimated.pause(); aliceAnimated.play();
32. CURRENTLY WORKING DRAFT! Supported by Chrome 39+ and Firefox 48+ STATUS
34. WEB APIS WHICH … SHOULD ALREADY BE KNOWN // Geolocation // IndexedDB // Storage (Local-/SessionStarage) // Notifications API
35. GAMEPAD & POINTER LOCK https://flic.kr/p/7BeYGK
36. VIBRATION HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/VIBRATION_API https://flic.kr/p/akrgGg
37. VIBRATIONS API GOOD VIBRATIONS… let duration = [ 200, !// vibrate 200ms 100, !// pause 100ms 200 !// vibrate 200ms ]; window.navigator.vibrate(duration);
38. W3C RECOMMENDATION Supported by Chrome and Firefox but not iOS
39. BATTERY STATUS HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/BATTERY_STATUS_API https://flic.kr/p/hNcMN
40. 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"); }); });
41. W3C CANDIDATE RECOMMENDATION Supported by Chrome and Firefox but will possibly being removed due abuse
42. AMBIENT LIGHT HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS https://flic.kr/p/4zNmSX
43. LIGHT EVENTS AMBIENT LIGHT window.addEventListener("devicelight", function (event) { var luminosity = event.value; console.log(luminosity); });
44. EDITORS DRAFT Supported by Firefox and Chrome for Android HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS
45. NETWORK INFORMATION HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/NETWORK_INFORMATION_API https://flic.kr/p/peQyWU
46. 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);
47. EDITORS DRAFT Supported by Firefox mobile and Chrome for Android
48. 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
49. 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 }
50. DEVICE ORIENTATION AND MOTION DEVICE MOTION window.addEventListener("devicemotion", handleMotion, true); function handleMotion(event) { console.log(event.acceleration.x + ' m/s2'); !// more stuff }
51. W3C WORKING DRAFT Supported by Chrome, Edge, Firefox and Safari mobile
52. WEB AUDIO HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_AUDIO_API https://flic.kr/p/7XqtJP
53. 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.
55. 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
56. W3C WORKING DRAFT Supported by every major platform at desktop and mobile
57. WEB MIDI HTTPS://WWW.W3.ORG/TR/WEBMIDI/ https://flic.kr/p/4fJGT
58. W3C WORKING DRAFT Supported by Chrome
59. WEBVR HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/WEBVR_API
60. WEBVR WEBVR APIS // Navigator.getVRDevices // VRDevice/HMDVRDevice // PositionSensorVRDevice // VRPositionState // VREyeParameters // VRFieldOfView/VRFieldOfViewReadOnly
61. 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>
63. EDITORS DRAFT Supported by Firefox and Chrome
64. SERVICE WORKERS & PUSH APIS HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/SERVICE_WORKER_API
65. ☁ Internet Service Worker Cache 1 2 3 3
66. ☁ Internet Service Worker Cache 5 3 2 4 1
67. ☁ Internet Service Worker Cache ❌ 1 2 3 4
68. 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); }); }
69. 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!!!")); });
70. PUSH APIS
71. W3C WORKING DRAFT Supported by Firefox and Chrome
72. BE PROGRESSIVE!
73. WEB BLUETOOTH HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_BLUETOOTH_API
74. 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); });
75. DRAFT Supported by Chrome (behind a flag)
76. WEB SPEECH HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_SPEECH_API https://flic.kr/p/5EWHJ4
77. WEB SPEECH SPEECH SYNTHESIS var msg = new SpeechSynthesisUtterance('Hi there.'); msg.onstart = function () { }; msg.onend = function () { }; window.speechSynthesis.speak(msg);
78. 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 () { }
79. DRAFT Supported by Chrome (prefixed) and Firefox (behind a flag)
80. SHAPE DETECTION HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/
81. 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."); })
82. 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."); })
83. 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."); })
84. DRAFT Supported by Chrome HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/
85. APART FROM WEB
86. SENSORS https://flic.kr/p/adQqaY
87. CREATE A COMMON API FOR DEVICE SENSORS Device and Sensors Working Group
88. WHAT’S COMING?
89. WEBUSB https://flic.kr/p/iSrCYX
90. PAYMENT https://flic.kr/p/bf45dn
91. WEB CRYPTO https://flic.kr/p/5hXtw5
92. PRESENTATION API
93. REMOTE PLAYBACK https://flic.kr/p/5Psjeu
94. APIS EVOLVED
95. FROM DEVICE- CENTRIC TO OFFLINE
97. SENSORS https://flic.kr/p/BF4bzN
98. THANK YOU! CARSTEN SANDTNER @CASAROCK