Project Fugu Superkräfte für Progressive Web Apps Christian Liebel @christianliebel Consultant

Hello, it’s me. Project Fugu Superkräfte für Progressive Web Apps Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

Project Fugu Superkräfte für Progressive Web Apps Web App Manifest Service Worker

✅ Offline capability ✅ Push messages ✅ Webcam/microphone access File System Access Raw Clipboard Access Local Font Access Project Fugu Superkräfte für Progressive Web Apps

Project Fugu Superkräfte für Progressive Web Apps

Cross-Vendor Initiative Led By… Project Fugu Superkräfte für Progressive Web Apps Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google

https://paint.js.org LIVE DEMO Project Fugu Superkräfte für Progressive Web Apps

Project Fugu Superkräfte für Progressive Web Apps Project Fugu https://goo.gle/fugu-api-tracker P

Project Fugu Superkräfte für Progressive Web Apps Project Fugu Browser navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker

Progressive Enhancement if ('share' in navigator) { navigator.share({ text: 'Hi!' }); } else { // Fallback method } Project Fugu Superkräfte für Progressive Web Apps Project Fugu

Badging API Project Fugu Superkräfte für Progressive Web Apps

Motivation - Communicate updates without distracting the user (in constrast to push notifications) - Typically displays a badge on the home screen, task bar or dock - Appearance varies from platform to platform Project Fugu Superkräfte für Progressive Web Apps Badging API

API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Project Fugu Superkräfte für Progressive Web Apps Badging API

Shortcuts Project Fugu Superkräfte für Progressive Web Apps

Provide secondary entry points for your application, now also for Progressive Web Apps added to the home screen Windows: Jump List iOS: Home Screen Quick Actions Project Fugu Superkräfte für Progressive Web Apps Shortcuts

Web App Manifest Extension { "shortcuts": [ { "name": "Direct Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Project Fugu Superkräfte für Progressive Web Apps Shortcuts

Screen Wake Lock Project Fugu Superkräfte für Progressive Web Apps

Motivation - Devices go to sleep in order to reduce energy consumption - However, this can get bothersome in some situations (e.g. while watching a movie, while cooking, etc.) - The Screen Wake Lock API prevents the device from turning off the screen while the application has the wake lock Project Fugu Superkräfte für Progressive Web Apps Screen Wake Lock API

API let wakeLockObj; if ('wakeLock' in navigator) { try { wakeLockObj = await navigator.wakeLock.request('screen'); console.log('👍', 'Screen Wake Lock', wakeLockObj); } catch (err) { console.error('👎', 'Screen Wake Lock', err); } } Project Fugu Superkräfte für Progressive Web Apps Screen Wake Lock API https://web.dev/wake-lock/

Async Clipboard API Project Fugu Superkräfte für Progressive Web Apps

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(); Project Fugu Superkräfte für Progressive Web Apps Async Clipboard API

File System Access API Project Fugu Superkräfte für Progressive Web Apps

Motivation - Currently, websites only have very limited access to the file system - Some applications heavily rely on working with files (e.g. Visual Studio Code) - Wouldn’t it be great if your web application could open files or folders from the native file system? Project Fugu Superkräfte für Progressive Web Apps File System Access API

API if ('showOpenFilePicker' in window) { const [handle] = await window.showOpenFilePicker(); const file = await handle.getFile(); // do something with the file } else { // use fallback API or disable feature in app } Project Fugu Superkräfte für Progressive Web Apps File System Access API

API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{ description: 'PNG files', accept: {'image/png': ['.png']} }] }); Project Fugu Superkräfte für Progressive Web Apps File System Access API

File System Handling API Project Fugu Superkräfte für Progressive Web Apps

Motivation Register your PWA as a handler for file extensions Requires installing the application first Declare supported extensions in Web App Manifest and add imperative code to your application logic Project Fugu Superkräfte für Progressive Web Apps File System Handling API

Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png": [".png"] } }] } Project Fugu Superkräfte für Progressive Web Apps File System Handling API

API if ('launchQueue' in window) { launchQueue.setConsumer(async params => { const [handle] = params.files; // do something with the handle }); } Project Fugu Superkräfte für Progressive Web Apps File System Handling API

Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu VS Code https://vscode.dev/

Photoshop, VS Code & Co How to write web-based productivity apps with Project Fugu Photoshop https://creativecloud.adobe.com/cc/photoshop

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 Some APIs already made their way into other browsers (e.g., Web Share) Fugu process makes sure that capabilities are implemented in a secure, privacy-preserving manner Let’s make the web a more capable platform! Project Fugu Superkräfte für Progressive Web Apps Summary

Q&A Project Fugu Superkräfte für Progressive Web Apps

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