$30 off During Our Annual Pro Sale. View Details »

PWA-Update: Neue Webschnittstellen für noch bessere Progressive Web Apps

PWA-Update: Neue Webschnittstellen für noch bessere Progressive Web Apps

Progressive Web Apps funktionieren offline, können Pushbenachrichtigungen darstellen und laufen auf jeder Plattform von Android über Firefox bis Windows. Außerdem können Entwickler auf alle Funktionen zugreifen, für die es eine Webschnittstelle gibt. In der Vergangenheit waren dies etwa Gamepads oder der Standort des Anwenders. Mit neuen Webschnittstellen will das World Wide Web Consortium (W3C) die Lücke zwischen nativen Apps und PWA weiter schließen: Mithilfe der Writable Files API sollen PWA auf einen Teilbereich des nativen Dateisystems zugreifen können, die Badging API erlaubt das Setzen von Notification-Badges und die Shape Detection API erlaubt das Erkennen von Barcodes, Gesichtern oder Text in Bildern. Christian Liebel zeigt Ihnen brandheiße Web-APIs, die Progressive Web Apps noch mächtiger machen.

Christian Liebel
PRO

June 26, 2019
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. PWA-Update
    Neue Webschnittstellen für noch bessere
    Progressive Web Apps
    Christian Liebel
    @christianliebel
    Consultant

    View Slide

  2. Hello, it’s me.
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Christian Liebel
    Follow me:
    @christianliebel
    Blog:
    christianliebel.com
    Email:
    christian.liebel
    @thinktecture.com
    Cross-Platform &
    Serverless

    View Slide

  3. PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    - Das PWA-Anwendungsmodell
    - Web App Manifest
    - Service Worker und Cache API
    - Workbox: Toolkit für PWAs
    - Angular-Unterstützung für PWAs
    - Natives Look & Feel
    - Migrieren & veröffentlichen
    - Payment Request API & Apple Pay
    www.rheinwerk-verlag.de/4707

    View Slide

  4. PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Cross-Platform UI

    View Slide

  5. Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA-Update
    Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive

    View Slide

  6. Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA-Update
    Blazor

    View Slide

  7. The Power of the Modern Web
    Web Share API
    Gamepad API
    Payment Request API
    Generic Sensor API
    Web Bluetooth API
    Push API
    Web Notifications
    WebVR
    WebRTC
    WebGL
    Speech Synthesis
    Web Cryptography API
    IndexedDB
    Geolocation
    Canvas
    Media Capture and Streams
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA-Update

    View Slide

  8. Epic Zen Garden
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    The Power of the Modern Web
    • WebGL
    • WebAssembly
    DEMO

    View Slide

  9. Chrome 73+
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA Installation on macOS & Linux

    View Slide

  10. Chrome 76+
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA Install Button

    View Slide

  11. Demo
    https://airhorner.com
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA Installation
    DEMO

    View Slide

  12. Motivation
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Web Share API
    - Share text, URLs, images, … to another
    person/app
    - Native system UI (share dialog)
    - Previous approximations/fallbacks: mailto:

    View Slide

  13. API
    try {
    await navigator.share({
    url: 'https://example.com',
    title: 'My cool title',
    text: 'My cool text'
    });
    console.log('');
    } catch (ex) {
    console.log('');
    }
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Web Share API

    View Slide

  14. Browser Support
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Web Share API
    Under
    Consideration
    12.2
    ?
    69
    (Android)

    View Slide

  15. Progressive Enhancement
    if ('share' in navigator) {
    navigatior.share({ title: 'My cool title' });
    } else {
    window.open('mailto:?subject=My cool title');
    }
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Web Share API

    View Slide

  16. Demo
    https://web-share.glitch.me
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA Installation
    DEMO

    View Slide

  17. - Sibling API
    - Chrome 71+
    - PWAs can register as a sharing target
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Web Share Target API

    View Slide

  18. PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Web Capabilities/Project Fugu
    Shape
    Detection API
    Wake Lock
    API
    Badging
    API
    Writable Files
    API
    9

    View Slide

  19. chrome://flags/#enable-experimental-web-platform-features
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Experimental Web Platform Features Flag

    View Slide

  20. 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
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Badging API

    View Slide

  21. API
    Set the badge
    Badge.set(5);
    Clear the badge
    Badge.clear();
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Badging API

    View Slide

  22. 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', _ => {
    ExperimentalBadge.set(++c);
    });
    ```
    • Honk.
    • T̶h̶a̶n̶k̶ Hate me.
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Badging API 9
    DEMO
    https://twitter.com/tomayac/status/1114131251181555714

    View Slide

  23. Use Cases
    - Instant messengers
    - Social media apps
    - E-Mail clients
    - To-do apps
    - Accounting
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Badging API

    View Slide

  24. 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
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Wake Lock API

    View Slide

  25. API
    let wakeLockObj;
    if ('getWakeLock' in navigator) {
    try {
    wakeLockObj = await navigator.getWakeLock('screen');
    console.log('', 'getWakeLock', wakeLockObj);
    } catch (ex) {
    console.error('', 'getWakeLock', err);
    }
    }
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Wake Lock API
    https://developers.google.com/web/updates/2018/12/wakelock

    View Slide

  26. API
    let wakeLockRequest;
    function toggleWakeLock() {
    if (wakeLockRequest) {
    wakeLockRequest.cancel();
    wakeLockRequest = null;
    }
    wakeLockRequest = wakeLockObj.createRequest();
    }
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Wake Lock API
    https://developers.google.com/web/updates/2018/12/wakelock

    View Slide

  27. Use Cases
    - Kiosk-style apps
    - Multimedia apps
    - Presentation apps
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Wake Lock API

    View Slide

  28. 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
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Writable Files API

    View Slide

  29. API (may change!)
    const fileRef = await self.chooseFileSystemEntries({
    type: 'openFile',
    multiple: false,
    readOnly: false,
    accepts: [{description: 'Images', extensions: ['jpg',
    'gif', 'png']}],
    suggestedStartLocation: 'pictures-library'
    });
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Writable Files API

    View Slide

  30. Use Cases
    - IDEs
    - Office-style apps
    - Multimedia apps
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Writable Files API

    View Slide

  31. Motivation
    PWA-Update
    Neue Webschnittstellen für noch bessere 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();
    faceDetector.detect(img)
    .then(faces => faces.forEach(face => {
    console.log('Face found!', face.boundingBox);
    }));
    }
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Shape Detection API

    View Slide

  33. Demo
    https://shape-detection-api.arnelle.me/
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Shape Detection API
    DEMO

    View Slide

  34. Use Cases
    - Crop images to faces
    - QR code readers
    - Translate text on images
    - …
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Shape Detection API

    View Slide

  35. Backlog
    https://bugs.chromium.org/p/chromium/issues/list?q=proj-fugu
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Web Capabilities/Project Fugu

    View Slide

  36. navigator.serviceWorker.ready.then(async (swReg) => {
    const bgFetch = await
    swReg.backgroundFetch.fetch('my-fetch', ['/ep-5.mp3',
    'ep-5-artwork.jpg'], {
    title: 'Episode 5: Interesting things.',
    icons: [{
    sizes: '300x300',
    src: '/ep-5-icon.png',
    type: 'image/png',
    }],
    downloadTotal: 60 * 1024 * 1024,
    });
    });
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Background Fetch API
    https://developers.google.com/web/updates/2018/12/background-fetch

    View Slide

  37. await videoElement.requestPictureInPicture();
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Picture in Picture API
    https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture

    View Slide

  38. Demo
    https://googlechrome.github.io/samples/picture-in-picture/
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Picture in Picture API
    DEMO

    View Slide

  39. PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Google Play Store accepts PWAs

    View Slide

  40. Workflow
    1. Create explainer
    2. Create initial draft of specification
    3. Gather feedback & iterate on design
    4. Origin trial
    5. Launch
    Result: Interoperable, standardized web API
    Project Fugu
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    PWA-Update

    View Slide

  41. - The web is already powerful
    - Project Fugu will bring even more native functionality to the web (…or
    at least to Chrome)
    - PWA is a great platform-independent application model
    - Use web APIs and let the browser do the platform-related stuff for
    you
    - Write once, run anywhere with the modern web & PWA
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps
    Summary

    View Slide

  42. Q&A
    PWA-Update
    Neue Webschnittstellen für noch bessere Progressive Web Apps

    View Slide

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

    View Slide