Sending the Angular app into deep, deep offline with Workbox

on YouTube ↗47m

" summary

Demonstrates an Angular PWA built with Workbox 6 and a custom service worker that uses injectManifest, Rollup bundling and workbox-window registration postponed until onload. Shows concrete runtime strategies like cache-first for avatars and network-first for news lists, plus stale-while-revalidate for details, broadcast update and background sync hooks, and recipes for Google Fonts and images. Notes increasing Workbox max file size, clients.claim timing tradeoffs, and a live demo repo and deploy on Azure Static Web Apps.

AI-written summary · about

" chapters (16)

1. 0:00Start
2. 0:32PLATINUM SPONSOR
3. 3:16Maxim Salnikov
4. 4:40Proper offline-ready web app
5. 6:45Precaching the app (shell) itself
6. 9:31Service worker 101
7. 11:57Options for Angular
8. 13:38Setting up
9. 15:03Source service worker
10. 19:53(Almost) ready service worker
11. 20:43Bundling and compressing
12. 21:17Rollup plugins configuration
13. 23:06Service worker registration
14. 29:00Strategies
15. 31:07Workbox recipes
16. 33:03Simplest offline fallback

" related talks

• 38mSending your Angular App into deep, deep offline with WorkboxMaxim Salnikov · AngularNL 2019
• 32mBuilding an Angular PWA Angular Service Worker or Workbox?Maxim Salnikov · Angular Connect 2018
• 58mOffline SecondAleksey Bogachuk · HolyJS 2017 Piter
• 54mBuilding an Angular PWA: Angular Service Worker or Workbox?Maxim Salnikov · iJS 2018 Spring
• 17mHow to build a PWA and stay sane: Introduction to WorkboxAlan Semenov · Mobile Era 2018
• 51mAutomating a service worker with Workbox 6Maxim Salnikov · NDC Oslo 2021
• 52mMany Frameworks – One PWA SolutionMaxim Salnikov · GDG DevFest Gorky 2018
• 41mOffline Web Apps don't exist anymore!Francesco Leardini · Conf42 JavaScript 2020