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.

Transcript

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide