APICON 2017: State of Web APIs

APICON 2017: State of Web APIs

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

B1fa8b2208e7d7cc68da7fbb519dbc96?s=128

Carsten Sandtner

September 20, 2017
Tweet

Transcript

  1. STATE OF WEB APIS Carsten Sandtner // @casarock // #APICON

    // Berlin
  2. CARSTEN SANDTNER @CASAROCK

  3. None
  4. None
  5. None
  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

  22. None
  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
  35. None
  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.
  56. None
  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>
  65. None
  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
  91. None
  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

  104. None
  105. SENSORS https://flic.kr/p/BF4bzN

  106. THANK YOU! CARSTEN SANDTNER @CASAROCK