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

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 

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

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 

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

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

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

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

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 ✓ ✓ ✓ 

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 

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 

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

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

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

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

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 

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 

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 

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 

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 

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 

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 

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

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

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 

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

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

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 

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

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

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