Building Desktop-Class Productivity Apps with Angular and Project Fugu

Understand the objectives of Progressive Web Apps (PWAs) and Project Fugu, which aim to enhance web applications with platform-specific features and capabilities.
Learn how to integrate PWA capabilities into your Angular projects, enabling features such as offline functionality and app-like experiences, leveraging Angular Service Workers.
Explore the latest updates on PWA availability, including support in Safari on macOS, as well as push notifications on iOS and iPadOS.
Gain insights into brand-new web platform APIs that empower developers to create more powerful and immersive web experiences. Examples include the Async Clipboard API, File System Access API, and Web Share API.
Dive into background information about PWAs and Project Fugu, including their history, development, and their impact on the web ecosystem.

Transcript

1. Christian Liebel
   @christianliebel
   christian.liebel@thinktecture.com
   Building desktop-class productivity apps
   with Angular 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 desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
   @christianliebel
   Demo App
   LIVE DEMO
   

   View Slide

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

   View 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 Slide

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

   View 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 Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. Now installable from Safari
    https://blog.tomayac.com/2023/06/07/web-apps-on-macos-sonoma-14-beta/
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Progressive Web Apps
    

    View Slide

11. Push Notifications
    Just as native apps, PWAs can
    receive push notifications
    Combination of two technologies:
    Web Notifications and Push API
    Supported by Chrome, Edge,
    Firefox, Safari
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    Progressive Web Apps
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. 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 Slide

17. 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 Slide

18. 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 Slide

19. 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 Slide

20. 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 Slide

21. 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 Slide

22. 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 Slide

23. 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 Slide

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

    View Slide

25. 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 Slide

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

    View Slide

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

    View Slide

28. 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 Slide

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

    View Slide

30. Q&A
    Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡
    @christianliebel
    

    View Slide

31. Thank you
    for your kind attention!
    Christian Liebel
    @christianliebel
    christian.liebel@thinktecture.com
    

    View Slide