Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Implementing Productivity Apps with Angular and Fugu APIs

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Q&A Implementing Productivity Apps with Angular and Fugu APIs

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]