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.

Transcript

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

   View 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 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 Slide

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

   View Slide

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

   View Slide

6. The Web in 2020
   Wohin sich das Web bewegt
   

   View 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 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 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 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 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 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 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 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 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 Slide

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

    View 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 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 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 Slide

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

    View Slide

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

    View 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 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 Slide

24. The Web in 2020
    Wohin sich das Web bewegt
    

    View 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 Slide

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

    View Slide

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

    View 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 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 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 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 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 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 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 Slide

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

    View 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 Slide

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

    View 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 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 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 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 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 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 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 Slide

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

    View Slide

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

    View 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 Slide

48. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide