State of Web APIs 2017

State of Web APIs 2017

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

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

May 31, 2017
Tweet

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

  11. None
  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
  33. None
  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.
  54. None
  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>
  62. None
  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

  96. None
  97. SENSORS https://flic.kr/p/BF4bzN

  98. THANK YOU! CARSTEN SANDTNER @CASAROCK