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

Building Cross-Platform Productivity Apps with PWA and Project Fugu

Building Cross-Platform Productivity Apps with PWA and Project Fugu

Progressive Web Apps (PWA) are a cross-platform application model based on web technology. Project Fugu is a multi-vendor effort that aims to bridge the gap between platform-specific apps and web applications by introducing powerful capabilities such as file systems or clipboard access. Developers can create productivity apps for the web by using PWA and Project Fugu together. In this talk, Christian Liebel explains the objectives of PWA and Project Fugu and shows how to add superpowers to your apps.

Christian Liebel
PRO

May 24, 2023
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Christian Liebel
    @christianliebel
    [email protected]
    Building Cross-Platform Productivity
    Apps with PWA and Project Fugu

    View Slide

  2. https://paint.js.org
    – Productivity app
    – Draw images
    – Lots of actions & tools
    – Installable
    – Read/save files
    – Copy/paste images
    from/to clipboard
    – Share files to other apps
    – Register for file extensions
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Demo App
    LIVE DEMO

    View Slide

  3. Paint PWA Capabilities
    Progressive
    Enhancement
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Agenda

    View Slide

  4. Canvas
    – Plain bitmap for the web
    – Cross-platform, hardware-
    accelerated graphics
    operations
    – Supports different contexts
    (2D, 3D: WebGL, WebGL 2.0)
    – Supported on all evergreen
    browsers and on IE 9+
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Paint

    View Slide

  5. Canvas 2D Context
    fillRect(x, y, width, height)
    strokeRect(x, y, width, height)
    beginPath()
    moveTo(x, y)
    lineTo(x, y)
    fill()
    stroke()
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Paint

    View Slide

  6. Browser Support
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Paint
    Canvas element ✓ ✓ ✓
    2D rendering context ✓ ✓ ✓
    à always build apps for the browser

    View Slide

  7. Paint PWA Capabilities
    Progressive
    Enhancement
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Agenda

    View Slide

  8. @christianliebel
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive

    View Slide

  9. Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Web App
    Manifest
    Service
    Worker

    View Slide

  10. Web App Manifest
    Distinguishes Web Apps from
    Websites
    JSON-based file containing
    metadata for apps only
    Apps can be identified by search
    engines, app store providers, etc.
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    PWA

    View Slide

  11. manifest.webmanifest
    {
    "short_name": "Paint",
    "name": "Paint Workshop",
    "theme_color": "white",
    "icons": [{
    "src": "icon.png",
    "sizes": "512x512"
    }],
    "start_url": "/index.html",
    "display": "standalone",
    "shortcuts": [/* … */]
    }
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    PWA
    Names
    Icons
    Display Mode
    Shortcuts
    Start URL
    Theme color (status bar/window bar)

    View Slide

  12. Service Worker
    JavaScript executed in an own
    thread, registered by the website
    Acts as a controller, proxy, or
    interceptor
    Has a cache to store responses (for
    offline availability and performance)
    Can wake up even when the website
    is closed and perform background
    tasks (e.g., push notifications or sync)
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    PWA

    View Slide

  13. Service Worker
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    PWA
    Service
    Worker
    Internet
    Website
    HTML/JS
    Cache
    fetch

    View Slide

  14. Browser Support
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Progressive Web Apps
    Offline Availability ✓ ✓ ✓
    Installability ✓ (iOS/iPadOS only) (Android only)
    Push notifications ✓ ✓ ✓

    View Slide

  15. Paint PWA Capabilities
    Progressive
    Enhancement
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Agenda

    View Slide

  16. Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel

    View Slide

  17. Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Capabilities
    https://goo.gle/fugu-api-tracker

    View Slide

  18. Browser
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Capabilities
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

    NSSharingServicePicker

    View Slide

  19. File System Access API
    Some applications heavily rely
    on working with files
    File System Access API allows
    you to open, save and
    overwrite files and directories
    Supported by Chrome, Edge
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Capabilities

    View Slide

  20. API
    const [handle] = await self.showOpenFilePicker({
    multiple: true,
    types: [{
    description: 'PNG files',
    accept: {'image/png': ['.png']}
    }]
    });
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    File System Access API

    View Slide

  21. Async Clipboard API
    Allows reading from/writing to
    the clipboard in an
    asynchronous manner
    Reading from the clipboard
    requires user consent first
    (privacy!)
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Capabilities

    View Slide

  22. 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();
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Async Clipboard API

    View Slide

  23. File Handling API
    Register your PWA as a
    handler for file extensions
    Requires installing the
    application first
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Capabilities

    View Slide

  24. Manifest Extension
    {
    "file_handlers": [{
    "action": "/",
    "accept": {
    "text/plain": [".txt"]
    },
    "icons": []
    }]
    }
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    File System Handling API

    View Slide

  25. API
    if ('launchQueue' in window) {
    launchQueue.setConsumer(async params => {
    const [handle] = params.files;
    // do something with the handle
    });
    }
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    File System Handling API

    View Slide

  26. Browser Support
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Capabilities
    Async Clipboard API ✓ ✓ (writeText() only)
    File System Access (Desktop only) — —

    View Slide

  27. Paint PWA Capabilities
    Progressive
    Enhancement
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Agenda

    View Slide

  28. Overview
    if ('showSaveFilePicker' in window) {
    const handle = await window.showSaveFilePicker();
    // …
    } else {
    // a) fall back to an alternative API (if available)
    // b) disable/hide functionality
    }
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Progressive Enhancement

    View Slide

  29. Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Target Platforms
    PROGRESSIVE WEB APPS
    + cars, smart fridges, …

    View Slide

  30. Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    VS Code
    https://vscode.dev/

    View Slide

  31. Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Photoshop
    https://creativecloud.adobe.com/cc/photoshop

    View Slide

  32. Capabilities (2021 à 2022)
    Async Clipboard
    8.91% à 10.10%
    (percent of desktop websites)
    File System Access
    29 à 2,317 (+7889%)
    (desktop websites)
    https://almanac.httparchive.org/en/2022/capabilities
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    2022 Web Almanac

    View 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
    The Fugu process makes sure that capabilities are implemented in an
    interoperable, secure and privacy-preserving manner
    Let’s make the web a more capable platform!
    Building Cross-Platform Productivity Apps with PWA and Project Fugu
    @christianliebel
    Summary

    View Slide

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

    View Slide