Project Fugu: Progressive Web Apps, Superpowered

Progressive Web Apps sind ein großartiges, plattformübergreifendes Anwendungsmodell. Als webbasierte Plattform gab es funktional aber einige Einschränkungen – zumindest bis jetzt. Die Initiative Project Fugu, der unter anderem Google, Microsoft und Intel angehören, hat ein klares Ziel: Ein leistungsfähigeres Web! Die von Project Fugu eingeführten APIs erlauben Zugriff auf Zwischenablage, Dateisystem und viele weitere bislang ausschließlich nativ verfügbare Schnittstellen. In dieser Session stellt Ihnen Christian Liebel, PWA-Experte bei Thinktecture, die Eckpunkte von Project Fugu vor und zeigt Ihnen einige APIs. So bekommt Ihre PWA neue Superkräfte!

Transcript

1. Project Fugu Progressive Web Apps, Superpowered Christian Liebel @christianliebel Consultant
2. Hello, it’s me. Project Fugu Progressive Web Apps, Superpowered Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
3. Project Fugu Progressive Web Apps, Superpowered Web App Manifest Service Worker
4. ✅ Offline capability ✅ Push messages ✅ Webcam/microphone access File System Access Raw Clipboard Access Local Font Access Project Fugu Progressive Web Apps, Superpowered
5. Project Fugu Progressive Web Apps, Superpowered
6. Cross-Vendor Initiative Led By… Project Fugu Progressive Web Apps, Superpowered Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
7. https://paint.js.org LIVE DEMO Project Fugu Progressive Web Apps, Superpowered
8. Project Fugu Progressive Web Apps, Superpowered Project Fugu https://goo.gle/fugu-api-tracker P
9. Project Fugu Progressive Web Apps, Superpowered Project Fugu Browser navigator.share({ url: 'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
10. Progressive Enhancement if ('share' in navigator) { navigator.share({ text: 'Hi!' }); } else { // Fallback method } Project Fugu Progressive Web Apps, Superpowered Project Fugu
11. Badging API Project Fugu Progressive Web Apps, Superpowered
12. 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 Progressive Web Apps, Superpowered Badging API
13. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Project Fugu Progressive Web Apps, Superpowered Badging API
14. Shortcuts Project Fugu Progressive Web Apps, Superpowered
15. 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 Progressive Web Apps, Superpowered Shortcuts
16. Web App Manifest Extension { "shortcuts": [ { "name": "Direct Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Project Fugu Progressive Web Apps, Superpowered Shortcuts
17. Screen Wake Lock Project Fugu Progressive Web Apps, Superpowered
18. 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 Progressive Web Apps, Superpowered Screen Wake Lock API
19. 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 Progressive Web Apps, Superpowered Screen Wake Lock API https://web.dev/wake-lock/
20. Async Clipboard API Project Fugu Progressive Web Apps, Superpowered
21. 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 Progressive Web Apps, Superpowered Async Clipboard API
22. File System Access API Project Fugu Progressive Web Apps, Superpowered
23. 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 Progressive Web Apps, Superpowered File System Access API
24. 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 Progressive Web Apps, Superpowered File System Access API
25. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{ description: 'PNG files', accept: {'image/png': ['.png']} }] }); Project Fugu Progressive Web Apps, Superpowered File System Access API
26. File System Handling API Project Fugu Progressive Web Apps, Superpowered
27. 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 Progressive Web Apps, Superpowered File System Handling API
28. Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png": [".png"] } }] } Project Fugu Progressive Web Apps, Superpowered File System Handling API
29. API if ('launchQueue' in window) { launchQueue.setConsumer(async params => { const [handle] = params.files; // do something with the handle }); } Project Fugu Progressive Web Apps, Superpowered File System Handling API
30. Project Fugu Progressive Web Apps, Superpowered Summary P
31. 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 Progressive Web Apps, Superpowered Summary
32. Q&A Project Fugu Progressive Web Apps, Superpowered
33. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com