Christian Liebel @christianliebel Consultant Produktivitäts-PWAs auf Desktop- Niveau mit Project Fugu

Hello, it’s me. Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Web App Manifest Service Worker

✅ Offline capability ✅ Push messages ✅ Webcam/microphone access File System Access Raw Clipboard Access Local Font Access Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

Cross-Vendor Initiative Led By… Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google

Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu https://goo.gle/fugu-api-tracker

Process – Write an Explainer (https://github.com/WICG/file-system- access/blob/main/EXPLAINER.md) – Discuss capability with developers, browser vendors, standard orgs – Iterate – Compile a design document – W3C TAG Review (https://github.com/w3ctag/design- reviews/issues/390) – Formal spec within Web Incubator Community Group (WICG, https://wicg.github.io/file-system-access/) Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu

Process – Implementation in Chromium – Launches behind a flag (chrome://flags/#enable-experimental-web- platform-features) – Origin Trial (https://developers.chrome.com/origintrials/) – Transfer to W3C Working Group + Recommendation? Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu

Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker

Progressive Enhancement if ('share' in navigator) { navigator.share({ text: 'Hi!' }); } else { // Fallback method } Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu

https://paint.js.org LIVE DEMO Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Async Clipboard & FS Access

Async Clipboard API Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

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(); Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Async Clipboard API

File System Access API Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

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? Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu 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 } Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu File System Access API

API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{ description: 'PNG files', accept: {'image/png': ['.png']} }] }); Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu File System Access API

File System Handling API Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

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 Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu File System Handling API

Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png": [".png"] } }] } Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu File System Handling API

API if ('launchQueue' in window) { launchQueue.setConsumer(async params => { const [handle] = params.files; // do something with the handle }); } Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu File System Handling API

Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Summary

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! Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Summary

Q&A Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

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