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

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

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

Progressive Web Apps sind ein plattformübergreifend einsetzbares Anwendungsmodell auf Web-Basis. Dank Project Fugu, einer Initiative der Chrome-Beitragenden Google, Microsoft und Intel, wird das Web um noch mächtigere Features erweitert. Damit können Entwickler endlich auch Produktivitäts-Apps wie Büro- und Bearbeitungsprogramme oder IDEs sinnvoll ins Web bringen. In diesem Vortrag zeigt Ihnen Christian Liebel, wie Sie Produktivitäts-PWAs auf Desktopniveau entwickeln können – Zugriff auf das Dateisystem, die Zwischenablage sowie Dateizuordnungen inklusive.

12c88a3a10478fa18d0363b3ba3d9df1?s=128

Christian Liebel
PRO

April 27, 2021
Tweet

Transcript

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

    Fugu
  2. 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
  3. Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Web App Manifest Service

    Worker
  4. ✅ 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
  5. Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

  6. 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
  7. Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu https://goo.gle/fugu-api-tracker

  8. 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
  9. 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
  10. Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu navigator.share({ url:

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

    }); } else { // Fallback method } Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Project Fugu
  12. https://paint.js.org LIVE DEMO Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Async

    Clipboard & FS Access
  13. Async Clipboard API Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

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

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

  20. 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
  21. Manifest Extension { "file_handlers": [{ "action": "/", "accept": { "image/png":

    [".png"] } }] } Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu File System Handling API
  22. 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
  23. Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu Summary

  24. 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
  25. Q&A Produktivitäts-PWAs auf Desktop-Niveau mit Project Fugu

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