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

Building desktop-class productivity apps with Angular and Project Fugu

Building desktop-class productivity apps with Angular and Project Fugu

Project Fugu is a multi-vendor effort that aims to bridge the gap between platform-specific apps and web applications: By introducing powerful capabiltities such as file system or clipboard access, developers can create desktop-class productivity apps for the web. This is the perfect complement to Angular, which can be used to develop feature-rich Progressive Web Apps. In this talk, I’ll explain the objective of Project Fugu and show you how to add superpowers to your Angular apps!

Christian Liebel

October 07, 2022
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Christian Liebel
    @christianliebel
    [email protected]
    Building desktop-class productivity apps
    with Angular and Project Fugu 🅰💘🐡

    View full-size 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 desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Demo App
    LIVE DEMO

    View full-size slide

  3. Paint PWA Capabilities
    Progressive
    Enhancement
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Agenda

    View full-size slide

  4. Browser Support
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Paint
    Canvas element ✓ ✓ ✓
    2D rendering context ✓ ✓ ✓
    à always build apps for the browser

    View full-size slide

  5. Paint PWA Capabilities
    Progressive
    Enhancement
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Agenda

    View full-size slide

  6. @christianliebel
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    Responsive Linkable Discoverable Installable App-like
    Connectivity
    Independent
    Fresh Safe Re-engageable Progressive

    View full-size slide

  7. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Web App
    Manifest
    Service
    Worker

    View full-size slide

  8. Schematic
    ng add @angular/pwa
    Angular PWA Support
    @christianliebel
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    LIVE DEMO

    View full-size slide

  9. Browser Support
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Progressive Web Apps
    Offline Availability ✓ ✓ ✓
    Installability ✓ (iOS/iPadOS only) (Android only)
    Push notifications ✓ macOS: Ventura
    iOS/iPadOS: 2023

    View full-size slide

  10. Paint PWA Capabilities
    Progressive
    Enhancemen
    t
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Agenda

    View full-size slide

  11. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel

    View full-size slide

  12. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Capabilities
    https://goo.gle/fugu-api-tracker

    View full-size slide

  13. Browser
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Capabilities
    navigator.share({ url: 'http://example.com' });
    ShareIntent DataTransferManager

    NSSharingServicePicker

    View full-size slide

  14. 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 desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Capabilities

    View full-size slide

  15. API
    const [handle] = await self.showOpenFilePicker({
    multiple: true,
    types: [{
    description: 'PNG files',
    accept: {'image/png': ['.png']}
    }]
    });
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    File System Access API
    LIVE DEMO

    View full-size slide

  16. Async Clipboard API
    Allows reading from/writing to
    the clipboard in an
    asynchronous manner
    Reading from the clipboard
    requires user consent first
    (privacy!)
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Capabilities

    View full-size slide

  17. API
    CopyContent
    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 desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Async Clipboard API
    LIVE DEMO

    View full-size slide

  18. File Handling API
    Register your PWA as a handler
    for file extensions
    Requires installing the
    application first
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Capabilities

    View full-size slide

  19. Manifest Extension
    {
    "file_handlers": [{
    "action": "/",
    "accept": {
    "text/plain": [".txt"]
    },
    "icons": []
    }]
    }
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    File System Handling API

    View full-size slide

  20. API
    if ('launchQueue' in window) {
    launchQueue.setConsumer(async params => {
    const [handle] = params.files;
    // do something with the handle
    });
    }
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    File System Handling API
    LIVE DEMO

    View full-size slide

  21. Browser Support
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Capabilities
    Async Clipboard API ✓ ✓ (writeText() only)
    File System Access (Desktop only) — —

    View full-size slide

  22. Paint PWA Capabilities
    Progressive
    Enhancement
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Agenda

    View full-size slide

  23. 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 desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Progressive Enhancement

    View full-size slide

  24. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    VS Code
    https://vscode.dev/

    View full-size slide

  25. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Photoshop
    https://creativecloud.adobe.com/cc/photoshop

    View full-size slide

  26. 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 desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    2022 Web Almanac

    View full-size slide

  27. 🅰💘🐡
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Summary

    View full-size slide

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

    View full-size slide