PWA Update 2019: Modern Web APIs for even better Progressive Web Apps

PWA is a great application model: These cross-platform, web-based apps work offline, can show push notifications and run in an own window (desktop) or standalone (mobile). Google’s Project Fugu will bring even more native functionality to the web, such as notification badges, wake locks and native file system access. Thinktecture’s Christian Liebel, GDE for Web Technologies, shows you how those APIs will pave the way for an even brighter future for Progressive Web Apps.

Transcript

1. PWA Update 2019
   Modern Web APIs for even better
   Progressive Web Apps
   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
   Modern Web APIs for even better Progressive Web Apps
   PWA Update 2019
   

   View Slide

3. PWA Update 2019
   Modern Web APIs for even better Progressive Web Apps
   Responsive Linkable Discoverable Installable App-like
   Connectivity
   Independent
   Fresh Safe Re-engageable Progressive
   

   View Slide

4. PWA Update 2019
   Modern Web APIs for even better Progressive Web Apps
   WebXR WebAuthn
   Payment
   Request API
   Badging API
   Wake Lock
   API
   Shape
   Detection
   API
   Async
   Clipboard
   API
   Native File
   System API
   

   View Slide

5. PWA Update 2019
   Modern Web APIs for even better Progressive Web Apps
   WebXR WebAuthn
   Payment
   Request API
   Badging API
   Wake Lock
   API
   Shape
   Detection
   API
   Async
   Clipboard
   API
   Native File
   System API
   

   View Slide

6. PWA Update 2019
   Modern Web APIs for even better Progressive Web Apps
   Reality–Virtuality Continuum
   (Milgram et al. 1994)
   Reality Virtuality
   Augmented Reality Augmented Virtuality..
   HoloLens HTC Vive
   Mixed Reality
   ARKit Cardboard
   

   View Slide

7. 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);
   }
   }
   PWA Update 2019
   Modern Web APIs for even better Progressive Web Apps
   WebXR
   

   View Slide

8. https://liebel.io/webxr
   PWA Update 2019
   Modern Web APIs for even better Progressive Web Apps
   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

9. PWA Update 2019
   Modern Web APIs for even better Progressive Web Apps
   WebXR WebAuthn
   Payment
   Request API
   Badging API
   Wake Lock
   API
   Shape
   Detection
   API
   Async
   Clipboard
   API
   Native File
   System API
   

   View Slide

10. 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
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebAuthn
    

    View Slide

11. API
    if ('PublicKeyCredential' in window) {
    const credential =
    await navigator.credentials.create({ publicKey });
    // OR
    const credential =
    await navigator.credentials.get({ publicKey });
    }
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebAuthn
    

    View Slide

12. https://webauthn.io
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebAuthn
    DEMO
    

    View Slide

13. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API
    

    View Slide

14. Traditional checkout forms are…
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Payment Request API
    repetitive tedious (sometimes) not
    touch-friendly
    

    View Slide

15. API
    if ('PaymentRequest' in window) {
    const request =
    new PaymentRequest(methodData, details, options);
    // Configure request
    }
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Payment Request API
    

    View Slide

16. UI
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Payment Request API
    

    View Slide

17. https://pwapraxis.liebel.io
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Payment Request API
    DEMO
    

    View Slide

18. 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
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Payment Request API
    

    View Slide

19. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API
    

    View Slide

20. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    

    View Slide

21. Cross-Vendor Initiative Led By…
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Project Fugu – A More Capable Web
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google
    

    View Slide

22. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Project Fugu
    https://goo.gle/fugu-api-tracker
    

    View Slide

23. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Project Fugu
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager
    …
    NSSharingServicePicker
    

    View Slide

24. 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
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Badging API
    

    View Slide

25. API
    Set the badge
    navigator.setAppBadge(5);
    Clear the badge
    navigator.clearAppBadge();
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Badging API
    

    View Slide

26. 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.
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Badging API 9
    DEMO
    https://twitter.com/tomayac/status/1114131251181555714
    

    View Slide

27. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API
    

    View Slide

28. 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
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Wake Lock API
    

    View Slide

29. API
    let wakeLock = null;
    if ('wakeLock' in navigator) {
    try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Wake lock active');
    } catch (err) {
    console.error(`${err.name}, ${err.message}`);
    }
    }
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Wake Lock API
    

    View Slide

30. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API
    

    View Slide

31. Faces Barcodes Text
    Use Cases
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Shape Detection API
    

    View Slide

32. 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);
    });
    }
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Shape Detection API
    

    View Slide

33. https://liebel.io/facedet
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Shape Detection API
    DEMO
    

    View Slide

34. 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
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Shape Detection API
    

    View Slide

35. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API
    

    View Slide

36. 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();
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Async Clipboard API
    

    View Slide

37. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    WebXR WebAuthn
    Payment
    Request API
    Badging API
    Wake Lock
    API
    Shape
    Detection
    API
    Async
    Clipboard
    API
    Native File
    System API
    

    View Slide

38. 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?
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Native File System API
    

    View Slide

39. 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
    }
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Native File System API
    

    View Slide

40. API (may change!)
    const handle = await self.chooseFileSystemEntries({
    type: 'openFile',
    multiple: false,
    readOnly: false,
    accepts: [{
    description: 'Images',
    extensions: ['jpg', 'gif', 'png']
    }]
    });
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Native File System API
    

    View Slide

41. https://liebel.io/paint
    DEMO
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Async Clipboard & NativeFS
    

    View Slide

42. PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    Where’s the Web Heading to?
    

    View Slide

43. - 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
    PWA Update 2019
    Modern Web APIs for even better Progressive Web Apps
    What’s in for Progressive Web Apps?
    

    View Slide

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

    View Slide