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.

Transcript

1. Christian Liebel
   @christianliebel
   christian.liebel@thinktecture.com
   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
    christian.liebel@thinktecture.com
    

    View Slide