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. STATE OF WEB
    APIS 2017
    Carsten Sandtner // @casarock // #IPC2017 // Berlin 05/31/2017

    View Slide

  2. CARSTEN
    SANDTNER
    @CASAROCK

    View Slide

  3. MEDIAMAN

    View Slide

  4. THE WEB

    View Slide

  5. BROWSER WARS

    View Slide

  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

    View Slide

  7. BROWSER DETECTION
    https://flic.kr/p/49DTbL

    View Slide

  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
    }

    View Slide

  9. STANDARDS!
    https://flic.kr/p/6K9jC4

    View Slide

  10. OPEN MATTERS!
    https://flic.kr/p/gbx9w

    View Slide

  11. View Slide

  12. FIREFOX OS IS A
    DISCONTINUED OPEN-
    SOURCE OPERATING
    SYSTEM – MADE FOR
    SMARTPHONES, TABLET
    COMPUTERS AND
    SMART TVS

    View Slide

  13. MOBILE WEB

    View Slide

  14. WEB VS. NATIVE

    View Slide

  15. https://flic.kr/p/fgpFpP

    View Slide

  16. ASIA
    https://flic.kr/p/7HbZiF

    View Slide

  17. FEB. 2017:
    ~65%
    WEBPAGE VIEWS
    GENERATED VIA
    MOBILE.
    Asia

    View Slide

  18. AFRICA
    https://flic.kr/p/raHxmo

    View Slide

  19. FEB. 2017:
    ~60%
    WEBPAGE VIEWS
    GENERATED VIA
    MOBILE.
    Africa

    View Slide

  20. DON’T LOCK THEM OUT!
    https://flic.kr/p/4ASX2S

    View Slide

  21. NEW APIS FOR
    MOBILE WEB

    View Slide

  22. THERE IS MORE THAN
    MOBILE WEB!

    View Slide

  23. WEB APPS ARE
    MAINSTREAM

    View Slide

  24. PWA

    View Slide

  25. API

    View Slide

  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

    View Slide

  27. ANIMATIONS

    View Slide

  28. WEB ANIMATION
    API

    View Slide

  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);
    }
    }

    View Slide

  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
    );

    View Slide

  31. WEB ANIMATION API
    CONTROL YOUR ANIMATION
    aliceAnimated.pause();
    aliceAnimated.play();

    View Slide

  32. CURRENTLY WORKING DRAFT!
    Supported by Chrome 39+ and Firefox 48+
    STATUS

    View Slide

  33. View Slide

  34. WEB APIS WHICH …
    SHOULD ALREADY BE KNOWN
    // Geolocation
    // IndexedDB
    // Storage (Local-/SessionStarage)
    // Notifications API

    View Slide

  35. GAMEPAD &
    POINTER LOCK
    https://flic.kr/p/7BeYGK

    View Slide

  36. VIBRATION
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/VIBRATION_API
    https://flic.kr/p/akrgGg

    View Slide

  37. VIBRATIONS API
    GOOD VIBRATIONS…
    let duration = [
    200, !// vibrate 200ms
    100, !// pause 100ms
    200 !// vibrate 200ms
    ];
    window.navigator.vibrate(duration);

    View Slide

  38. W3C RECOMMENDATION
    Supported by Chrome and Firefox but not iOS

    View Slide

  39. BATTERY STATUS
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/BATTERY_STATUS_API
    https://flic.kr/p/hNcMN

    View Slide

  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");
    });
    });

    View Slide

  41. W3C CANDIDATE
    RECOMMENDATION
    Supported by Chrome and Firefox but will possibly being
    removed due abuse

    View Slide

  42. AMBIENT LIGHT
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS
    https://flic.kr/p/4zNmSX

    View Slide

  43. LIGHT EVENTS
    AMBIENT LIGHT
    window.addEventListener("devicelight", function (event) {
    var luminosity = event.value;
    console.log(luminosity);
    });

    View Slide

  44. EDITORS DRAFT
    Supported by Firefox and Chrome for Android
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/AMBIENT_LIGHT_EVENTS

    View Slide

  45. NETWORK INFORMATION
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/NETWORK_INFORMATION_API
    https://flic.kr/p/peQyWU

    View Slide

  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);

    View Slide

  47. EDITORS DRAFT
    Supported by Firefox mobile and Chrome for Android

    View Slide

  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

    View Slide

  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
    }

    View Slide

  50. DEVICE ORIENTATION AND MOTION
    DEVICE MOTION
    window.addEventListener("devicemotion", handleMotion, true);
    function handleMotion(event) {
    console.log(event.acceleration.x + ' m/s2');
    !// more stuff
    }

    View Slide

  51. W3C WORKING DRAFT
    Supported by Chrome, Edge, Firefox and Safari mobile

    View Slide

  52. WEB AUDIO
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_AUDIO_API
    https://flic.kr/p/7XqtJP

    View Slide

  53. WEB AUDIO API
    TYPICAL WORKFLOW
    // Create audio context
    // Inside the context, create sources — such as
    , 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.

    View Slide

  54. View Slide

  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

    View Slide

  56. W3C WORKING DRAFT
    Supported by every major platform at desktop and mobile

    View Slide

  57. WEB MIDI
    HTTPS://WWW.W3.ORG/TR/WEBMIDI/
    https://flic.kr/p/4fJGT

    View Slide

  58. W3C WORKING DRAFT
    Supported by Chrome

    View Slide

  59. WEBVR
    HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/WEBVR_API

    View Slide

  60. WEBVR
    WEBVR APIS
    // Navigator.getVRDevices
    // VRDevice/HMDVRDevice
    // PositionSensorVRDevice
    // VRPositionState
    // VREyeParameters
    // VRFieldOfView/VRFieldOfViewReadOnly

    View Slide

  61. WEBVR
    WEBVR USING AFRAME.IO



    Hello, WebVR! - A-Frame!

    !
    !


    !
    !
    !
    !
    !
    !
    !
    !

    View Slide

  62. View Slide

  63. EDITORS DRAFT
    Supported by Firefox and Chrome

    View Slide

  64. SERVICE WORKERS & PUSH APIS
    HTTPS://DEVELOPER.MOZILLA.ORG/DE/DOCS/WEB/API/SERVICE_WORKER_API

    View Slide



  65. Internet

    Service Worker

    Cache
    1
    2
    3
    3

    View Slide



  66. Internet

    Service Worker

    Cache
    5
    3
    2
    4
    1

    View Slide



  67. Internet

    Service Worker

    Cache

    1
    2
    3
    4

    View Slide

  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);
    });
    }

    View Slide

  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!!!"));
    });

    View Slide

  70. PUSH APIS

    View Slide

  71. W3C WORKING DRAFT
    Supported by Firefox and Chrome

    View Slide

  72. BE
    PROGRESSIVE!

    View Slide

  73. WEB BLUETOOTH
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_BLUETOOTH_API

    View Slide

  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); });

    View Slide

  75. DRAFT
    Supported by Chrome (behind a flag)

    View Slide

  76. WEB SPEECH
    HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/WEB/API/WEB_SPEECH_API
    https://flic.kr/p/5EWHJ4

    View Slide

  77. WEB SPEECH
    SPEECH SYNTHESIS
    var msg = new SpeechSynthesisUtterance('Hi there.');
    msg.onstart = function () { };
    msg.onend = function () { };
    window.speechSynthesis.speak(msg);

    View Slide

  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 () { }

    View Slide

  79. DRAFT
    Supported by Chrome (prefixed) and Firefox (behind a flag)

    View Slide

  80. SHAPE
    DETECTION
    HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/

    View Slide

  81. SHAPE DETECTION
    FACE DETECTION
    let faceDetector = new FaceDetector({ fastMode: true, maxDetectedFaces: 1 });
    !// Assuming |theImage| is e.g. a 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.");
    })

    View Slide

  82. SHAPE DETECTION
    TEXT DETECTION
    let textDetector = new TextDetector();
    !// Assuming |theImage| is e.g. a 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.");
    })

    View Slide

  83. SHAPE DETECTION
    BARCODE DETECTION
    let barcodeDetector = new BarcodeDetector();
    !// Assuming |theImage| is e.g. a 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.");
    })

    View Slide

  84. DRAFT
    Supported by Chrome
    HTTPS://WICG.GITHUB.IO/SHAPE-DETECTION-API/

    View Slide

  85. APART FROM WEB

    View Slide

  86. SENSORS
    https://flic.kr/p/adQqaY

    View Slide

  87. CREATE A
    COMMON API FOR
    DEVICE SENSORS
    Device and Sensors
    Working Group

    View Slide

  88. WHAT’S COMING?

    View Slide

  89. WEBUSB
    https://flic.kr/p/iSrCYX

    View Slide

  90. PAYMENT
    https://flic.kr/p/bf45dn

    View Slide

  91. WEB CRYPTO
    https://flic.kr/p/5hXtw5

    View Slide

  92. PRESENTATION
    API

    View Slide

  93. REMOTE
    PLAYBACK
    https://flic.kr/p/5Psjeu

    View Slide

  94. APIS EVOLVED

    View Slide

  95. FROM DEVICE-
    CENTRIC TO OFFLINE

    View Slide

  96. View Slide

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

    View Slide

  98. THANK
    YOU!
    CARSTEN SANDTNER
    @CASAROCK

    View Slide