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
PRO

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 🅰💘🐡
  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
  3. Paint PWA Capabilities Progressive Enhancement Building desktop-class productivity apps with

    Angular and Project Fugu 🅰💘🐡 @christianliebel Agenda
  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
  5. Paint PWA Capabilities Progressive Enhancement Building desktop-class productivity apps with

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

    @christianliebel Web App Manifest Service Worker
  8. Schematic ng add @angular/pwa Angular PWA Support @christianliebel Building desktop-class

    productivity apps with Angular and Project Fugu 🅰💘🐡 LIVE DEMO
  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 ✓
  10. Paint PWA Capabilities Progressive Enhancemen t Building desktop-class productivity apps

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

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

    @christianliebel Capabilities https://goo.gle/fugu-api-tracker
  13. Browser Building desktop-class productivity apps with Angular and Project Fugu

    🅰💘🐡 @christianliebel Capabilities navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
  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
  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
  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
  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
  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
  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
  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
  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) — —
  22. Paint PWA Capabilities Progressive Enhancement Building desktop-class productivity apps with

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

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

    @christianliebel Photoshop https://creativecloud.adobe.com/cc/photoshop
  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
  27. 🅰💘🐡 Building desktop-class productivity apps with Angular and Project Fugu

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