Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State of Web APIs 2017

State of Web APIs 2017

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

Carsten Sandtner

May 31, 2017
Tweet

More Decks by Carsten Sandtner

Other Decks in Technology

Transcript

  1. 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
  2. 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 }
  3. FIREFOX OS IS A DISCONTINUED OPEN- SOURCE OPERATING SYSTEM –

    MADE FOR SMARTPHONES, TABLET COMPUTERS AND SMART TVS
  4. PWA

  5. API

  6. 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
  7. 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); } }
  8. 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 );
  9. WEB APIS WHICH … SHOULD ALREADY BE KNOWN // Geolocation

    // IndexedDB // Storage (Local-/SessionStarage) // Notifications API
  10. VIBRATIONS API GOOD VIBRATIONS… let duration = [ 200, !//

    vibrate 200ms 100, !// pause 100ms 200 !// vibrate 200ms ]; window.navigator.vibrate(duration);
  11. 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"); }); });
  12. 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);
  13. 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
  14. 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 }
  15. DEVICE ORIENTATION AND MOTION DEVICE MOTION window.addEventListener("devicemotion", handleMotion, true); function

    handleMotion(event) { console.log(event.acceleration.x + ' m/s2'); !// more stuff }
  16. 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.
  17. 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
  18. WEBVR WEBVR APIS // Navigator.getVRDevices // VRDevice/HMDVRDevice // PositionSensorVRDevice //

    VRPositionState // VREyeParameters // VRFieldOfView/VRFieldOfViewReadOnly
  19. 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>
  20. 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); }); }
  21. 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!!!")); });
  22. 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); });
  23. WEB SPEECH SPEECH SYNTHESIS var msg = new SpeechSynthesisUtterance('Hi there.');

    msg.onstart = function () { }; msg.onend = function () { }; window.speechSynthesis.speak(msg);
  24. 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 () { }
  25. 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."); })
  26. 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."); })
  27. 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."); })