Fast, offline-first PWA with Workbox

An introductory talk about PWAs, Service Workers, and why and how to add Workbox to your PWA.

Presented at Chrome Dev Summit Extended GDG Cebu (Virtual), 27 February 2021

Transcript

1. Fast, offline-first PWA with Workbox Chrome Dev Summit Extended with GDG Cebu 27 February 2021 Eka · @ekafyi · me@eka.fyi
2. Hello world!
3. Progressive Web Apps What, why, and the characteristics
4. Progressive Web Apps “Websites that took all the right vitamins” Web applications + progressive enhancement with modern web APIs Capable, Reliable, Installable Not concerned with specific web stacks (frameworks, client/server-rendered)
5. Progressive Web Apps Capabilities of native apps + reach of web apps Improve performance and user experience Increase user retention and conversion Can be packaged as Trusted Web Apps
6. Capable Various modern web APIs make it possible for web apps to provide native-like features & capabilities See: whatpwacando.today
7. Each browser has their own criteria; similar basic requirements Chrome (Feb 2021): - Meets a user engagement heuristic - HTTPS - Web App Manifest - Service Worker Installable Example from web.dev/add-manifest
8. Fast and dependable, regardless of the network No blank page or default offline page, no silent failures or crashes. Important or relevant content always available. The Service Worker API is used to achieve this Reliable Image source: blog.sessionstack.com/how-javascript-works-service-workers-their-life-cycle-and- use-cases-52b19ad98b58
9. Service Worker and Cache API How it works and what to do
10. Web browsers are single threaded (limitations: blocking, tab has to be open) Worker runs in a separate background thread (see: Web Workers API) Service Worker is a subset of Web Worker registered against an origin and a path “[A service worker] takes the form of a JavaScript file that can control the web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situation” — MDN Service Worker
11. Service Worker lifecycle Image source: https://developers.google.com/web/fundamentals/primers/service-workers We add event listeners in our service worker code
13. Cache in Service Worker Store to the cache Retrieve from cache
14. Caching strategies from the Offline Cookbook web.dev/offline-cookbook cache only network only
15. Caching strategies from the Offline Cookbook web.dev/offline-cookbook cache first, fall back to network network first, fall back to cache
16. Problem: Long and redundant to write code that covers these complex cache strategies
17. Workbox What, how to use, example usage
18. Workbox A set of libraries to write and manage service workers and caching Best practices, common scenarios, and advanced customization (extendable strategies; plugins) “FW for our SW”
21. How to use Workbox in our web app? 1. (a) Load from CDN, or (b) Integrate to build process 2. Register the service worker 3. Create/modify our service worker 4. Build it
22. The quickest and most simple start Works in any environment, including plain static HTML & JS Caveats: Have to load entire bundle No automatic precaching How to use Workbox? 1a. Load from CDN
23. How to use Workbox? 1b. Integrate to build process - workbox-cli - workbox-build - workbox-webpack-plugin - workbox-window GenerateSW - generate a service worker file and write to disk - simple runtime config InjectManifest - generate list of URLs to precache; add it to existing service worker - use this if using service worker with other APIs / additional scripts
24. How to use Workbox? 2. Register service worker Register the build service worker file (not the source!) on your web page If using a frontend framework, make sure to do this in the HTML template or in a mounted component
25. How to use Workbox? 3. Create/modify service worker with workbox packages Examples in next slide: workbox-core workbox-precaching workbox-routing workbox-strategies workbox-cacheable-response workbox-expiration workbox-background-sync source service worker file example
27. Example 0: workbox-core skipWaiting = publish a new service worker clientClaim = have it update and control a web page as soon as possible
28. Example 1: workbox-precaching self.__WB_MANIFEST is an array that contains all files that are being precached
29. Example 1: workbox-precaching
30. Example 2: workbox-routing workbox-strategies Use if you want to… implement common caching strategies by routes (eg. specific URLs/paths or request destination) Currently 5 strategies are available. More on the strategies: web.dev/offline-cookbook
31. Example 2a: workbox-routing registerRoute(capture, handler, method = "GET") capture can be a string, regular expression, or callback function returning truthy value The callback function gets an argument that consists of: developer.mozilla.org/en-US/docs/We b/API/URL developer.mozilla.org/en-US/docs/We b/API/Request developer.mozilla.org/en-US/docs/We b/API/Event
32. registerRoute(capture, handler, method = "GET") handler callback function that returns a Response object We can pass a workbox strategy or any custom handler function Example 2a: workbox-routing
33. instantiate a new strategy object with options: new CacheFirst(options) options consist of cacheName and plugins (an array of plugin objects) plugins customize behaviors by manipulating responses and requests during the lifecycle of a request Currently there are 5 plugins Example 2b: workbox-strategies with plugins
34. Example 2: workbox-routing, workbox-strategies, plugins — putting it together
35. Use if you want to… retry a request and receive an event when network connection is restored after a failed request to the network Example: Chrome search bar Related web API: BackgroundSync github.com/WICG/background-sync Example 3: workbox- background- sync
36. Example 3: workbox-background-sync LEFT: complete BackgroundSyncPlugin implementation with options passed to defined POST routes RIGHT: event listener code in our page/layout component
37. Use if you want to… Implement common routing and caching patterns in one-line functions with sensible defaults Currently 6 recipes are available. Example 4: workbox-recipes
38. Example 4: Offline Fallback from workbox-recipes LEFT: do the same thing with workbox-routing setCatchHandler RIGHT: offlineFallback recipe
39. Workbox provides ready-to-use wrappers for common use cases and extendable classes for less common ones Less time on redundant boilerplate code, focus on features, ie. PWA best practices Less friction to give user a faster, more resilient and delightful web experience
40. Thank you | Salamat | Terima kasih | Matur nuwun Eka me@eka.fyi