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!

Transcript

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