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

JavaScript Fullstack Day: Project Fugu

JavaScript Fullstack Day: Project Fugu

Presented as a part of the fullstack day of International JavaScript Conference 2021 London, Online Edition.

Progressive Web Apps are a great cross-platform application model, even if somewhat restricted in use – until now, that is. Project Fugu is an initiative led by Google, Microsoft, and Intel. Their goal: a more capable web. Home screen icon badges and shortcuts, clipboard access, accelerated shape detection in images and native file system access are only a few examples of Fugu’s powerful APIs. In this session, Christian Liebel, PWA specialist at Thinktecture, shows you the objective of Project Fugu and demonstrates some of its APIs. Are you ready to superpower your Progressive Web App?

Christian Liebel

April 21, 2021
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Project Fugu
    Progressive Web Apps, Superpowered
    Christian Liebel
    @christianliebel
    Consultant

    View full-size slide

  2. Hello, it’s me.
    Project Fugu
    Progressive Web Apps, Superpowered
    Christian Liebel
    Twitter:
    @christianliebel
    Email:
    christian.liebel
    @thinktecture.com
    Angular & PWA
    Slides:
    thinktecture.com
    /christian-liebel

    View full-size slide

  3. Project Fugu
    Progressive Web Apps, Superpowered
    Web App
    Manifest
    Service
    Worker

    View full-size slide

  4. ✅ Offline capability
    ✅ Push messages
    ✅ Webcam/microphone access
    File System Access
    Raw Clipboard Access
    Local Font Access
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

  5. Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

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

    View full-size slide

  7. Project Fugu
    Progressive Web Apps, Superpowered
    Project Fugu
    https://goo.gle/fugu-api-tracker

    View full-size slide

  8. Process
    – Write an Explainer (https://github.com/WICG/file-system-
    access/blob/main/EXPLAINER.md)
    – Discuss capability with developers, browser vendors, standard orgs
    – Iterate
    – Compile a design document
    – W3C TAG Review (https://github.com/w3ctag/design-
    reviews/issues/390)
    – Formal spec within Web Incubator Community Group (WICG,
    https://wicg.github.io/file-system-access/)
    Project Fugu
    Progressive Web Apps, Superpowered
    Project Fugu

    View full-size slide

  9. Process
    – Implementation in Chromium
    – Launches behind a flag (chrome://flags/#enable-experimental-web-
    platform-features)
    – Origin Trial (https://developers.chrome.com/origintrials/)
    – Transfer to W3C Working Group + Recommendation?
    Project Fugu
    Progressive Web Apps, Superpowered
    Project Fugu

    View full-size slide

  10. Project Fugu
    Progressive Web Apps, Superpowered
    Project Fugu
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

    NSSharingServicePicker

    View full-size slide

  11. Progressive Enhancement
    if ('share' in navigator) {
    navigator.share({ text: 'Hi!' });
    } else {
    // Fallback method
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    Project Fugu

    View full-size slide

  12. Badging API
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

  13. 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
    Project Fugu
    Progressive Web Apps, Superpowered
    Badging API

    View full-size slide

  14. API
    Set the badge
    navigator.setAppBadge(5);
    Clear the badge
    navigator.clearAppBadge();
    Project Fugu
    Progressive Web Apps, Superpowered
    Badging API

    View full-size slide

  15. Shortcuts
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

  16. 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
    Project Fugu
    Progressive Web Apps, Superpowered
    Shortcuts

    View full-size slide

  17. Web App Manifest Extension
    {
    "shortcuts": [
    {
    "name": "Direct Messages",
    "url": "/mails/new",
    "icons": []
    },
    {
    "name": "Notifications",
    "url": "/appointments/new",
    "icons": []
    }
    ]
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    Shortcuts

    View full-size slide

  18. Screen Wake Lock
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

  19. 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
    Project Fugu
    Progressive Web Apps, Superpowered
    Screen Wake Lock API

    View full-size slide

  20. 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);
    }
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    Screen Wake Lock API
    https://web.dev/wake-lock/

    View full-size slide

  21. https://paint.js.org
    LIVE DEMO
    Project Fugu
    Progressive Web Apps, Superpowered
    Async Clipboard & FS Access

    View full-size slide

  22. Async Clipboard API
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

  23. 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();
    Project Fugu
    Progressive Web Apps, Superpowered
    Async Clipboard API

    View full-size slide

  24. File System Access API
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

  25. 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?
    Project Fugu
    Progressive Web Apps, Superpowered
    File System Access API

    View full-size slide

  26. 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
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    File System Access API

    View full-size slide

  27. API
    const [handle] = await self.showOpenFilePicker({
    multiple: true,
    types: [{
    description: 'PNG files',
    accept: {'image/png': ['.png']}
    }]
    });
    Project Fugu
    Progressive Web Apps, Superpowered
    File System Access API

    View full-size slide

  28. File System Handling API
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

  29. 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
    Project Fugu
    Progressive Web Apps, Superpowered
    File System Handling API

    View full-size slide

  30. Manifest Extension
    {
    "file_handlers": [{
    "action": "/",
    "accept": {
    "image/png": [".png"]
    }
    }]
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    File System Handling API

    View full-size slide

  31. API
    if ('launchQueue' in window) {
    launchQueue.setConsumer(async params => {
    const [handle] = params.files;
    // do something with the handle
    });
    }
    Project Fugu
    Progressive Web Apps, Superpowered
    File System Handling API

    View full-size slide

  32. Project Fugu
    Progressive Web Apps, Superpowered
    Summary

    View full-size slide

  33. 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!
    Project Fugu
    Progressive Web Apps, Superpowered
    Summary

    View full-size slide

  34. Q&A
    Project Fugu
    Progressive Web Apps, Superpowered

    View full-size slide

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

    View full-size slide