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

Implementing Productivity Apps with Angular and Fugu APIs

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.

Christian Liebel

October 29, 2020
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. 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
  2. https://paint.js.org – Productivity app – Draw images – Lots of

    actions & tools – Installable – Read/save files – Copy/paste images from/to clipboard – Register for file extensions Implementing Productivity Apps with Angular and Fugu APIs Demo Use Case
  3. 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)
  4. Service Worker Implementing Productivity Apps with Angular and Fugu APIs

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

    Capabilities »Let’s bring the web back – API by API« Thomas Steiner, Google
  6. 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
  7. 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
  8. 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