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

The Web in 2020: wohin sich das Web bewegt

The Web in 2020: wohin sich das Web bewegt

Einmal im Jahr trifft sich das World Wide Web Consortium (W3C) zur Meetingwoche. Christian Liebel von Thinktecture war beim diesjährigen Treffen der Arbeitsgruppen in Japan dabei und hat die neuesten Informationen im Gepäck: Welche Spezifikationen gerade im Gespräch sind – welche neuen Schnittstellen das Web bekommen soll – und was das für Webanwendungen im Jahr 2020 heißen könnte.

Christian Liebel

October 15, 2019
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. The Web in 2020
    Wohin sich das Web bewegt
    Christian Liebel
    @christianliebel
    Consultant

    View full-size slide

  2. Hello, it’s me.
    Christian Liebel
    Follow me:
    @christianliebel
    Email:
    christian.liebel
    @thinktecture.com
    Cross-Platform Development &
    Serverless Cloud Architectures
    Wohin sich das Web bewegt
    The Web in 2020

    View full-size slide

  3. - My personal summary of this year’s TPAC
    - Modern Web APIs and initiatives discussed about/presented during
    TPAC
    - Live demos of many modern Web APIs
    The Web in 2020
    Wohin sich das Web bewegt
    What to Expect

    View full-size slide

  4. Technical
    Plenary and
    Advisory
    Committee Meetings
    The Web in 2020
    Wohin sich das Web bewegt

    View full-size slide

  5. The Web in 2020
    Wohin sich das Web bewegt
    Fukuoka, Japan

    View full-size slide

  6. The Web in 2020
    Wohin sich das Web bewegt

    View full-size slide

  7. The Web in 2020
    Wohin sich das Web bewegt
    Advisory
    Committee
    Advisory Board
    Technical
    Architecture Group
    Technical Groups
    elects
    elects
    majority
    reviews
    (Oversimplified)

    View full-size slide

  8. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  9. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  10. The Web in 2020
    Wohin sich das Web bewegt
    Reality–Virtuality Continuum
    (Milgram et al. 1994)
    Reality Virtuality
    Augmented Reality Augmented Virtuality..
    HoloLens HTC Vive
    Mixed Reality
    ARKit Cardboard

    View full-size slide

  11. API
    if ('xr' in navigator) {
    const supported = await navigator.xr.isSessionSupported('immersive-vr');
    if (supported) {
    const session = navigator.xr.requestSession('immersive-vr');
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl', { xrCompatible: true });
    session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
    const refSpace = await session.requestReferenceSpace('local');
    session.requestAnimationFrame(onXRFrame);
    }
    }
    The Web in 2020
    Wohin sich das Web bewegt
    WebXR

    View full-size slide

  12. https://liebel.io/webxr
    The Web in 2020
    Wohin sich das Web bewegt
    WebXR
    DEMO
    Cardboard Asset: Apache 2.0, © Google 2017, https://github.com/immersive-web/webxr-polyfill/blob/master/build/webxr-polyfill.js#L4291

    View full-size slide

  13. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  14. Motivation
    - Cooperation with FIDO alliance
    - W3C Recommendation (official standard)
    - Alternative, passwordless authentication method
    - Authentication via internal authenticator (e.g. Touch ID, Win Hello)
    - Ideally backed by internal hardware module (TPM)
    - Scoped per origin
    - Eliminates password theft, phishing and replay attacks
    - User-friendly
    The Web in 2020
    Wohin sich das Web bewegt
    WebAuthn

    View full-size slide

  15. API
    if ('PublicKeyCredential' in window) {
    const credential =
    await navigator.credentials.create({ publicKey });
    // OR
    const credential =
    await navigator.credentials.get({ publicKey });
    }
    The Web in 2020
    Wohin sich das Web bewegt
    WebAuthn

    View full-size slide

  16. https://webauthn.io
    The Web in 2020
    Wohin sich das Web bewegt
    WebAuthn
    DEMO

    View full-size slide

  17. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  18. Traditional checkout forms are…
    The Web in 2020
    Wohin sich das Web bewegt
    Payment Request API
    repetitive tedious (sometimes) not
    touch-friendly

    View full-size slide

  19. API
    if ('PaymentRequest' in window) {
    const request =
    new PaymentRequest(methodData, details, options);
    // Configure request
    }
    The Web in 2020
    Wohin sich das Web bewegt
    Payment Request API

    View full-size slide

  20. UI
    The Web in 2020
    Wohin sich das Web bewegt
    Payment Request API

    View full-size slide

  21. https://pwapraxis.liebel.io
    The Web in 2020
    Wohin sich das Web bewegt
    Payment Request API
    DEMO

    View full-size slide

  22. Next Steps
    Payment Request Handler API is in the works
    Goal: Progressive Web Apps can register as a payment handler
    Extension point for third-party payment service providers
    The Web in 2020
    Wohin sich das Web bewegt
    Payment Request API

    View full-size slide

  23. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  24. The Web in 2020
    Wohin sich das Web bewegt

    View full-size slide

  25. Cross-Vendor Initiative Led By…
    The Web in 2020
    Wohin sich das Web bewegt
    Project Fugu – A More Capable Web
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google

    View full-size slide

  26. The Web in 2020
    Wohin sich das Web bewegt
    Project Fugu
    https://goo.gle/fugu-api-tracker

    View full-size slide

  27. The Web in 2020
    Wohin sich das Web bewegt
    Project Fugu
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

    NSSharingServicePicker

    View full-size slide

  28. Motivation
    - Communicate updates
    without distracting the
    user (in constrast to push
    notifications)
    - Typically displays a badge
    on the home screen, task
    bar or dock
    - Appearance varies from
    platform to platform
    The Web in 2020
    Wohin sich das Web bewegt
    Badging API

    View full-size slide

  29. API
    Set the badge
    navigator.setAppBadge(5);
    Clear the badge
    navigator.clearAppBadge();
    The Web in 2020
    Wohin sich das Web bewegt
    Badging API

    View full-size slide

  30. Demo
    • Install (link: http://Airhorner.com) Airhorner.com (Windows / macOS, not
    Android).
    • Paste this code in the @ChromeDevTools console:
    ```
    let c = 0;
    const h = document.querySelector('.horn');
    h.addEventListener('click', _ => {
    navigator.setExperimentalAppBadge(++c);
    });
    ```
    • Honk.
    • T̶h̶a̶n̶k̶ Hate me.
    The Web in 2020
    Wohin sich das Web bewegt
    Badging API 9
    DEMO
    https://twitter.com/tomayac/status/1114131251181555714

    View full-size slide

  31. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  32. Motivation
    - Devices can go to sleep in order to reduce energy consumption
    - Different types of sleep:
    - Turn off the display (screen sleep)
    - Turn off the CPU (system sleep)
    - However, this can get bothersome in some situations (e.g. while
    watching a movie etc.)
    - The Wake Lock API prevents the device from going to sleep for a
    given period of time
    The Web in 2020
    Wohin sich das Web bewegt
    Wake Lock API

    View full-size slide

  33. API
    let wakeLockObj;
    if ('getWakeLock' in navigator) {
    try {
    wakeLockObj = await navigator.getWakeLock('screen');
    console.log('', 'getWakeLock', wakeLockObj);
    } catch (ex) {
    console.error('', 'getWakeLock', err);
    }
    }
    The Web in 2020
    Wohin sich das Web bewegt
    Wake Lock API
    https://developers.google.com/web/updates/2018/12/wakelock

    View full-size slide

  34. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  35. Faces Barcodes Text
    Use Cases
    The Web in 2020
    Wohin sich das Web bewegt
    Shape Detection API

    View full-size slide

  36. Face Detection API
    if ('FaceDetector' in window) {
    const img = document.querySelector('img');
    const faceDetector = new FaceDetector();
    const faces = await faceDetector.detect(img)
    faces.forEach(face => {
    console.log('Face found!', face.boundingBox);
    });
    }
    The Web in 2020
    Wohin sich das Web bewegt
    Shape Detection API

    View full-size slide

  37. https://liebel.io/facedet
    The Web in 2020
    Wohin sich das Web bewegt
    Shape Detection API
    DEMO

    View full-size slide

  38. Related: WebML
    Machine Learning for the Web (WebML)
    Goal: Low-level Web API for machine learning (Web Neural Network API)
    Microsoft, Google, Apple, Mozilla on board
    The Web in 2020
    Wohin sich das Web bewegt
    Shape Detection API

    View full-size slide

  39. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  40. API
    Copy Content
    await navigator.clipboard.writeText('foo');
    await navigator.clipboard.write(/* data */);
    Paste Content
    const content = await navigator.clipboard.readText();
    const content = await navigator.clipboard.read();
    The Web in 2020
    Wohin sich das Web bewegt
    Async Clipboard API

    View full-size slide

  41. The Web in 2020
    Wohin sich das Web bewegt
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API

    View full-size slide

  42. Motivation
    - Currently, websites only have very limited access to the file system
    - Some applications heavily rely on working with files (e.g. Visual Studio
    Code)
    - Wouldn’t it be great if your web application could open files or folders
    from the native file system?
    The Web in 2020
    Wohin sich das Web bewegt
    Native File System API

    View full-size slide

  43. API (may change!)
    if ('chooseFileSystemEntries' in window) {
    const handle = await window.chooseFileSystemEntries();
    const file = await handle.getFile();
    // do something with the file
    } else {
    // use fallback API or disable feature in app
    }
    The Web in 2020
    Wohin sich das Web bewegt
    Native File System API

    View full-size slide

  44. API (may change!)
    const handle = await self.chooseFileSystemEntries({
    type: 'openFile',
    multiple: false,
    readOnly: false,
    accepts: [{
    description: 'Images',
    extensions: ['jpg', 'gif', 'png']
    }]
    });
    The Web in 2020
    Wohin sich das Web bewegt
    Native File System API

    View full-size slide

  45. https://liebel.io/paint
    DEMO
    The Web in 2020
    Wohin sich das Web bewegt
    Async Clipboard & NativeFS

    View full-size slide

  46. The Web in 2020
    Wohin sich das Web bewegt
    Where’s the Web Heading to?

    View full-size slide

  47. - Web is getting more and more capable
    - The Web is establishing itself as an application platform
    - But: Web is threatened by alternative approaches and platforms,
    support for modern Web API varies from platform to platform
    - You can make a difference!
    - File bugs in browser engine bugtrackers
    - File Fugu requests: http://bit.ly/new-fugu-request
    The Web in 2020
    Wohin sich das Web bewegt
    Where’s the Web Heading to?

    View full-size slide

  48. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    [email protected]

    View full-size slide