Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Superkräfte für Produktivitäts-PWAs – Project Fugu

Superkräfte für Produktivitäts-PWAs – Project Fugu

Progressive Web Apps sind ein hervorragendes plattformübergreifendes Anwendungsmodell. In mancherlei Hinsicht musste das Modell jedoch noch hinter seine nativen Gegenstücke zurücktreten. Das wollen Google, Microsoft und Intel mit dem Capabilities Project – Codename Fugu – jetzt ändern. Ihr Ziel: ein leistungsfähigeres Web. Dank den Fugu APIs erhalten PWAs nun Zugriff auf das lokale Dateisystem und die Zwischenablage und können sich als Bearbeitungsprogramm für bestimmte Dateierweiterungen hinterlegen. In dieser Session zeigt Christian Liebel von Thinktecture, wie Fugu APIs entstehen und wie sie einen ganzen Schwung an Produktivitäts-Apps ins Web verlagern könnten.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

February 16, 2021
Tweet

Transcript

  1. Christian Liebel @christianliebel Consultant Superkräfte für Produktivitäts-PWAs – Project Fugu

  2. Hello, it’s me. Superkräfte für Produktivitäts-PWAs – Project Fugu Christian

    Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel
  3. The image part with relationship ID rId3 was not found

    in the file. The image part with relationship ID rId3 was not found in the file. The image part with relationship ID rId3 was not found in the file. Special Day “Modern Business Applications” Thema Sprecher Datum, Uhrzeit Blazor in .NET 5: Single-Page-Applications mit C# & WebAssembly Christian Weyer DI, 16. Februar 2021, 11.00 bis 12.00 Realtime Cross-Plattform-Applikationen mit Angular, ASP.NET Core und SignalR Fabian Gosebrink DI, 16. Februar 2021, 12.15 bis 13.15 Superkräfte für Produktivitäts-PWAs – Project Fugu Christian Liebel DI, 16. Februar 2021, 14.30 bis 15.30 Schneller ans Ziel: Web-Apps mit Ionic Max Schulte DI, 16. Februar 2021, 16.00 bis 17.00
  4. Superkräfte für Produktivitäts-PWAs – Project Fugu Web App Manifest Service

    Worker
  5. ✅ Offline capability ✅ Push messages ✅ Webcam/microphone access File

    System Access Raw Clipboard Access Font Table Access Superkräfte für Produktivitäts-PWAs – Project Fugu
  6. Superkräfte für Produktivitäts-PWAs – Project Fugu

  7. Cross-Vendor Initiative Led By… Superkräfte für Produktivitäts-PWAs – Project Fugu

    Project Fugu – A More Capable Web »Let’s bring the web back – API by API« Thomas Steiner, Google
  8. Superkräfte für Produktivitäts-PWAs – Project Fugu Project Fugu https://goo.gle/fugu-api-tracker

  9. Process – Write an Explainer (https://github.com/WICG/native-file- system/blob/master/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/native-file-system/) Superkräfte für Produktivitäts-PWAs – Project Fugu Project Fugu
  10. 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? Superkräfte für Produktivitäts-PWAs – Project Fugu Project Fugu
  11. Superkräfte für Produktivitäts-PWAs – Project Fugu Project Fugu navigator.share({ url:

    'http://example.com' }); ShareIntent DataTransferManager … NSSharingServicePicker
  12. Progressive Enhancement if ('share' in navigator) { navigator.share({ text: 'Hi!'

    }); } else { // Fallback method } Superkräfte für Produktivitäts-PWAs – Project Fugu Project Fugu
  13. Badging API Superkräfte für Produktivitäts-PWAs – Project Fugu

  14. 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 Superkräfte für Produktivitäts-PWAs – Project Fugu Badging API
  15. API Set the badge navigator.setAppBadge(5); Clear the badge navigator.clearAppBadge(); Superkräfte

    für Produktivitäts-PWAs – Project Fugu Badging API
  16. Shortcuts Superkräfte für Produktivitäts-PWAs – Project Fugu

  17. 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 Superkräfte für Produktivitäts-PWAs – Project Fugu Shortcuts
  18. Web App Manifest Extension { "shortcuts": [ { "name": "Direct

    Messages", "url": "/mails/new", "icons": [] }, { "name": "Notifications", "url": "/appointments/new", "icons": [] } ] } Superkräfte für Produktivitäts-PWAs – Project Fugu Shortcuts
  19. Screen Wake Lock Superkräfte für Produktivitäts-PWAs – Project Fugu

  20. 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 of the screen while the application has the wake lock Superkräfte für Produktivitäts-PWAs – Project Fugu Screen Wake Lock API
  21. 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); } } Superkräfte für Produktivitäts-PWAs – Project Fugu Screen Wake Lock API https://web.dev/wake-lock/
  22. https://paint.js.org LIVE DEMO Superkräfte für Produktivitäts-PWAs – Project Fugu Async

    Clipboard & FS Access
  23. Async Clipboard API Superkräfte für Produktivitäts-PWAs – Project Fugu

  24. 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(); Superkräfte für Produktivitäts-PWAs – Project Fugu Async Clipboard API
  25. File System Access API Superkräfte für Produktivitäts-PWAs – Project Fugu

  26. 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? Superkräfte für Produktivitäts-PWAs – Project Fugu File System Access API
  27. 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 } Superkräfte für Produktivitäts-PWAs – Project Fugu File System Access API
  28. API const [handle] = await self.showOpenFilePicker({ multiple: true, types: [{

    description: 'PNG files', accept: {'image/png': ['.png']} }] }); Superkräfte für Produktivitäts-PWAs – Project Fugu File System Access API
  29. File System Handling API Superkräfte für Produktivitäts-PWAs – Project Fugu

  30. 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 Superkräfte für Produktivitäts-PWAs – Project Fugu File System Handling API
  31. Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png":

    [".png"] } }] } Superkräfte für Produktivitäts-PWAs – Project Fugu File System Handling API
  32. API if ('launchQueue' in window) { launchQueue.setConsumer(async params => {

    const [handle] = params.files; // do something with the handle }); } Superkräfte für Produktivitäts-PWAs – Project Fugu File System Handling API
  33. Superkräfte für Produktivitäts-PWAs – Project Fugu Summary

  34. 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! Superkräfte für Produktivitäts-PWAs – Project Fugu Summary
  35. Q&A Superkräfte für Produktivitäts-PWAs – Project Fugu

  36. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com