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 🅰💘🐡
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, macOS from Sonoma) (Android only) Push notifications ✓ ✓ ✓
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
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
12. Paint PWA Capabilities Progressive Enhancemen t Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel Agenda
13. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel
14. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel Capabilities https://goo.gle/fugu-api-tracker
15. Browser Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel Capabilities navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
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
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
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
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
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
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
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
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) — —
24. Paint PWA Capabilities Progressive Enhancement Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel Agenda
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
26. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel VS Code https://vscode.dev/
27. Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel Photoshop https://creativecloud.adobe.com/cc/photoshop
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
29. 🅰💘🐡 Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel Summary
30. Q&A Building desktop-class productivity apps with Angular and Project Fugu 🅰💘🐡 @christianliebel
31. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com