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) (Android only) Push notifications ✓ macOS: Ventura iOS/iPadOS: 2023 ✓

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

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