Implementing Productivity Apps with Angular and Fugu APIs

Double-click a file, make changes, and save it back to disk: That’s how productivity apps, IDEs, and image editors have been working since the early days of desktop computing. Until now, web applications could not integrate into this workflow. Fortunately, Project Fugu, a cross-vendor initiative by Google, Microsoft, and Intel, aims to bring very powerful native capabilities to the web—file handler registrations, clipboard, and file system access included!
This allows web developers like you to finally bring Office-style apps, IDEs, text, image, or video editors to the web.
Thinktecture’s Christian Liebel shows you how to integrate Native File System and File Handler API into your Angular app.

Transcript

1. Christian Liebel
   @christianliebel
   Consultant
   Implementing Productivity Apps with
   Angular and Fugu APIs
   

   View Slide

2. Hello, it’s me.
   Implementing Productivity Apps with Angular and Fugu APIs
   Christian Liebel
   Twitter:
   @christianliebel
   Email:
   christian.liebel
   @thinktecture.com
   Angular & PWA
   Slides:
   thinktecture.com
   /christian-liebel
   

   View Slide

3. https://paint.js.org
   – Productivity app
   – Draw images
   – Lots of actions & tools
   – Installable
   – Read/save files
   – Copy/paste images
   from/to clipboard
   – Share files to other apps
   – Register for file extensions
   Implementing Productivity Apps with Angular and Fugu APIs
   Demo Use Case
   

   View Slide

4. Paint PWA Capabilities
   Implementing Productivity Apps with Angular and Fugu APIs
   Agenda
   

   View Slide

5. Paint PWA Capabilities
   Implementing Productivity Apps with Angular and Fugu APIs
   Agenda
   

   View Slide

6. Paint PWA Capabilities
   Implementing Productivity Apps with Angular and Fugu APIs
   Agenda
   

   View Slide

7. Implementing Productivity Apps with Angular and Fugu APIs
   Web App
   Manifest
   Service
   Worker
   

   View Slide

8. manifest.webmanifest
   {
   "short_name": "Paint",
   "name": "Paint Workshop",
   "theme_color": "white",
   "icons": [{
   "src": "icon.png",
   "sizes": "512x512"
   }],
   "start_url": "/index.html",
   "display": "standalone",
   "shortcuts": [/* … */]
   }
   Implementing Productivity Apps with Angular and Fugu APIs
   PWA
   Names
   Icons
   Display Mode
   Shortcuts
   Start URL
   Theme color (status bar/window bar)
   

   View Slide

9. Service Worker
   Implementing Productivity Apps with Angular and Fugu APIs
   PWA
   Service
   Worker
   Internet
   Website
   HTML/JS
   Cache
   fetch
   

   View Slide

10. Workbox
    Toolchain by Google
    Includes a CLI
    Generates a service worker
    implementation from directory
    contents (e.g., build output, or
    our development directory)
    Allows you to modify the
    service worker behavior
    (maximum flexibility)
    PWA
    Implementing Productivity Apps with Angular and Fugu APIs
    

    View Slide

11. Paint PWA Capabilities
    Implementing Productivity Apps with Angular and Fugu APIs
    Agenda
    

    View Slide

12. Implementing Productivity Apps with Angular and Fugu APIs
    

    View Slide

13. Project Fugu
    Implementing Productivity Apps with Angular and Fugu APIs
    Capabilities
    »Let’s bring the web
    back – API by API«
    Thomas Steiner, Google
    

    View Slide

14. File System Access API
    Some applications heavily rely
    on working with files (e.g.
    Visual Studio Code, Adobe
    Photoshop, …)
    File System Access API allows
    you to open, save and override
    files and directories
    Shipped with Google Chrome
    86
    Implementing Productivity Apps with Angular and Fugu APIs
    Capabilities
    

    View Slide

15. File System Handling API
    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
    Implementing Productivity Apps with Angular and Fugu APIs
    Capabilities
    

    View Slide

16. Q&A
    Implementing Productivity Apps with Angular and Fugu APIs
    

    View Slide

17. 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!
    Implementing Productivity Apps with Angular and Fugu APIs
    Summary
    

    View Slide

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

    View Slide