Building Cross-Platform Productivity Apps with PWA and Project Fugu

Progressive Web Apps (PWA) are a cross-platform application model based on web technology. Project Fugu is a multi-vendor effort that aims to bridge the gap between platform-specific apps and web applications by introducing powerful capabilities such as file systems or clipboard access. Developers can create productivity apps for the web by using PWA and Project Fugu together. In this talk, Christian Liebel explains the objectives of PWA and Project Fugu and shows how to add superpowers to your apps.

Transcript

1. Christian Liebel @christianliebel christian.liebel@thinktecture.com Building Cross-Platform Productivity Apps with PWA 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 Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Demo App LIVE DEMO
3. Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Agenda
4. 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
5. 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
6. 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
7. Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Agenda
8. @christianliebel Building Cross-Platform Productivity Apps with PWA and Project Fugu Responsive Linkable Discoverable Installable App-like Connectivity Independent Fresh Safe Re-engageable Progressive
9. Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Web App Manifest Service Worker
10. 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
11. 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)
12. 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
13. Service Worker Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel PWA Service Worker Internet Website HTML/JS Cache fetch
14. 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 ✓ ✓ ✓
15. Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Agenda
16. Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel
17. Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities https://goo.gle/fugu-api-tracker
18. Browser Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
19. 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
20. 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
21. 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
22. 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
23. 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
24. 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
25. 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
26. Browser Support Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Capabilities Async Clipboard API ✓ ✓ (writeText() only) File System Access (Desktop only) — —
27. Paint PWA Capabilities Progressive Enhancement Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Agenda
28. 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
29. Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Target Platforms PROGRESSIVE WEB APPS + cars, smart fridges, …
30. Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel VS Code https://vscode.dev/
31. Building Cross-Platform Productivity Apps with PWA and Project Fugu @christianliebel Photoshop https://creativecloud.adobe.com/cc/photoshop
32. 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
33. 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
34. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com