Christian Liebel @christianliebel [email protected] Building Cross-Platform Productivity Apps with PWA 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 Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Demo App LIVE DEMO

Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Agenda

Canvas – Plain bitmap for the web – Cross-platform, hardware- accelerated graphics operations – Supports different contexts (2D, 3D: WebGL, WebGL 2.0) – Supported on all evergreen browsers and on IE 9+ Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Paint

Canvas 2D Context fillRect(x, y, width, height) strokeRect(x, y, width, height) beginPath() moveTo(x, y) lineTo(x, y) fill() stroke() Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Paint

Browser Support Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Paint Canvas element ✓ ✓ ✓ 2D rendering context ✓ ✓ ✓ à always build apps for the browser

Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Agenda

@christianliebel Building Cross-Platform Productivity Apps with PWA and Project Fugu Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive

Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Web App Manifest Service Worker

Web App Manifest Distinguishes Web Apps from Websites JSON-based file containing metadata for apps only Apps can be identified by search engines, app store providers, etc. Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel PWA

manifest.webmanifest { "short_name": "Paint", "name": "Paint Workshop", "theme_color": "white", "icons": [{ "src": "icon.png", "sizes": "512x512" }], "start_url": "/index.html", "display": "standalone", "shortcuts": [/* … */] } Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel PWA Names Icons Display Mode Shortcuts Start URL Theme color (status bar/window bar)

Service Worker JavaScript executed in an own thread, registered by the website Acts as a controller, proxy, or interceptor Has a cache to store responses (for offline availability and performance) Can wake up even when the website is closed and perform background tasks (e.g., push notifications or sync) Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel PWA

Service Worker Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel PWA Service Worker Internet Website HTML/JS Cache fetch

Browser Support Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Progressive Web Apps Offline Availability ✓ ✓ ✓ Installability ✓ (iOS/iPadOS only) (Android only) Push notifications ✓ ✓ ✓

Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Agenda

Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel

Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities https://goo.gle/fugu-api-tracker

Browser Building Cross-Platform Productivity Apps with PWA 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 Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities

API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{ description: 'PNG files', accept: {'image/png': ['.png']} }] }); Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel File System Access API

Async Clipboard API Allows reading from/writing to the clipboard in an asynchronous manner Reading from the clipboard requires user consent first (privacy!) Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities

API Copy Content 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 Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Async Clipboard API

File Handling API Register your PWA as a handler for file extensions Requires installing the application first Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities

Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "text/plain": [".txt"] }, "icons": [] }] } Building Cross-Platform Productivity Apps with PWA 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 Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel File System Handling API

Browser Support Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities Async Clipboard API ✓ ✓ (writeText() only) File System Access (Desktop only) — —

Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA 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 Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Progressive Enhancement

Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Target Platforms PROGRESSIVE WEB APPS + cars, smart fridges, …

Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel VS Code https://vscode.dev/

Building Cross-Platform Productivity Apps with PWA 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 Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel 2022 Web Almanac

New powerful APIs regularly ship with new releases of Chromium-based browsers Some only add minor finishing touches, others enable whole application categories as productivity apps to finally make the shift to the web The Fugu process makes sure that capabilities are implemented in an interoperable, secure and privacy-preserving manner Let’s make the web a more capable platform! Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Summary

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