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

Progressive Web Apps jenseits von Mobile: Desktop-PWAs mit Fugu

Progressive Web Apps jenseits von Mobile: Desktop-PWAs mit Fugu

Progressive Web Apps (PWA) sind ein webbasiertes Anwendungsmodell: Einmal geschrieben lassen sich diese Anwendungen überall dort ausführen, wo ein halbwegs moderner Browser zur Verfügung steht – von Mobilgeräten bis hin zum Desktop. Gerade auf Windows, macOS und Linux haben PWAs ein großes Potenzial, denn hier erscheint die Lücke zwischen dem Web und nativen Anwendungsplattformen mit am größten. Um diese Lücke zu schließen, haben sich Microsoft, Intel und Google im Projekt Fugu zusammengeschlossen.

Christian Liebel zeigt Ihnen aktuelle Fugu-Schnittstellen und welche Arten von Anwendungen damit nun endlich ins Web gebracht werden können.

Melden Sie sich jetzt kostenlos zum Webinar an. Wir freuen uns auf Sie!

Christian Liebel
PRO

October 20, 2021
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Christian Liebel
    @christianliebel
    Consultant

    View Slide

  2. Hello, it’s me.
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Christian Liebel
    Twitter:
    @christianliebel
    Email:
    christian.liebel
    @thinktecture.com
    Angular & PWA
    Slides:
    thinktecture.com
    /christian-liebel

    View Slide

  3. Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Web App
    Manifest
    Service
    Worker

    View Slide

  4. ✅ Offline capability
    ✅ Push messages
    ✅ Webcam/microphone access
    File System Access
    Raw Clipboard Access
    Local Font Access
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  5. Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  6. Cross-Vendor Initiative Led By…
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Project Fugu – A More Capable Web
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google

    View Slide

  7. https://paint.js.org
    LIVE DEMO
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  8. Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Project Fugu
    https://goo.gle/fugu-api-tracker
    P

    View Slide

  9. Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Project Fugu
    Browser
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

    NSSharingServicePicker

    View Slide

  10. Progressive Enhancement
    if ('share' in navigator) {
    navigator.share({ text: 'Hi!' });
    } else {
    // Fallback method
    }
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Project Fugu

    View Slide

  11. Badging API
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  12. 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
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Badging API

    View Slide

  13. API
    Set the badge
    navigator.setAppBadge(5);
    Clear the badge
    navigator.clearAppBadge();
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Badging API

    View Slide

  14. Shortcuts
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  15. Provide secondary entry points
    for your application, now also
    for Progressive Web Apps
    added to the home screen
    Windows: Jump List
    iOS: Home Screen Quick
    Actions
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Shortcuts

    View Slide

  16. Web App Manifest Extension
    {
    "shortcuts": [
    {
    "name": "Direct Messages",
    "url": "/mails/new",
    "icons": []
    },
    {
    "name": "Notifications",
    "url": "/appointments/new",
    "icons": []
    }
    ]
    }
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Shortcuts

    View Slide

  17. Screen Wake Lock
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  18. Motivation
    - Devices go to sleep in order to reduce energy consumption
    - However, this can get bothersome in some situations (e.g. while
    watching a movie, while cooking, etc.)
    - The Screen Wake Lock API prevents the device from turning of the
    screen while the application has the wake lock
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Screen Wake Lock API

    View Slide

  19. API
    let wakeLockObj;
    if ('wakeLock' in navigator) {
    try {
    wakeLockObj = await navigator.wakeLock.request('screen');
    console.log('👍', 'Screen Wake Lock', wakeLockObj);
    } catch (err) {
    console.error('👎', 'Screen Wake Lock', err);
    }
    }
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Screen Wake Lock API
    https://web.dev/wake-lock/

    View Slide

  20. Async Clipboard API
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  21. 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();
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Async Clipboard API

    View Slide

  22. File System Access API
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  23. 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?
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    File System Access API

    View Slide

  24. API
    if ('showOpenFilePicker' in window) {
    const [handle] = await window.showOpenFilePicker();
    const file = await handle.getFile();
    // do something with the file
    } else {
    // use fallback API or disable feature in app
    }
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    File System Access API

    View Slide

  25. API
    const [handle] = await self.showOpenFilePicker({
    multiple: true,
    types: [{
    description: 'PNG files',
    accept: {'image/png': ['.png']}
    }]
    });
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    File System Access API

    View Slide

  26. File System Handling API
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

  27. Motivation
    Register your PWA as a handler for file extensions
    Requires installing the application first
    Declare supported extensions in Web App Manifest and add imperative
    code to your application logic
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    File System Handling API

    View Slide

  28. Manifest Extension
    {
    "file_handlers": [{
    "action": "/",
    "accept": {
    "image/png": [".png"]
    }
    }]
    }
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    File System Handling API

    View Slide

  29. API
    if ('launchQueue' in window) {
    launchQueue.setConsumer(async params => {
    const [handle] = params.files;
    // do something with the handle
    });
    }
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    File System Handling API

    View Slide

  30. Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Summary
    P

    View Slide

  31. New powerful APIs regularly ship with new releases of Chromium-based
    browsers
    Some only add minor finishing touches, others enable whole application
    categories as productivity apps to finally make the shift to the web
    Some APIs already made their way into other browsers (e.g., Web Share)
    Fugu process makes sure that capabilities are implemented in a secure,
    privacy-preserving manner
    Let’s make the web a more capable platform!
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu
    Summary

    View Slide

  32. Q&A
    Progressive Web Apps jenseits von Mobile
    Desktop-PWAs mit Fugu

    View Slide

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

    View Slide