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

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.

Carsten Sandtner

September 20, 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. 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); }; });
  19. WEBVR WEBVR APIS // Navigator.getVRDevices // VRDevice/HMDVRDevice // PositionSensorVRDevice //

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

    msg.onstart = function () { }; msg.onend = function () { }; window.speechSynthesis.speak(msg);
  25. 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 () { }
  26. 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."); })
  27. 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."); })
  28. 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."); })
  29. THE “WEB OF THINGS” (WOT) IS THE IDEA OF TAKING

    THE LESSONS LEARNED FROM THE WORLD WIDE WEB AND APPLYING THEM TO IOT.
  30. 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