The perfect Service Worker. How to design it?
summary
Designs a Service Worker strategy around concrete choices: use Workbox for pre-cache with content hashes, prefer pre-caching for static, versioned assets and runtime caching for user‑visited pages and decorative images with limits like maxEntries=50 and max‑age to prevent unbounded growth. Measure app footprint in DevTools Application → Clear Storage (example sizes move from ~154 KB after install to ~1.4 MB after navigation). Use on‑demand caching for user‑saved items, separate caches for critical vs optional resources, and avoid “cache everything” to respect bandwidth and storage.
AI-written summary · about
chapters (19)
- 0:00Start
- 2:43Everything depended on network
- 3:08Lie-Fi = you get a mess
- 6:01Service Worker is a proxy
- 7:45Size is one of the core advantages of PWA
- 12:28Be mindful of used resources
- 12:49Have a plan
- 13:12Two parts of the strategy
- 14:24Cut the fat
- 14:56Don't cache, trash!
- 20:01Be selective
- 20:18When to cache
- 23:41Use content versioning
- 23:52Precaching pros&cons
- 25:59Runtime caching pros&cons
- 27:23Control the size
- 31:53Custom handler
- 34:23Find your balance
- 35:03Summary
related talks
36mCaching strategies and their performance footprint
30mBuilding Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
35mTame your service worker [...]
32mThe ServiceWorker is coming, look busy
27mAnd Now You Understand Service Workers
17mHow to build a PWA and stay sane: Introduction to Workbox
42mHow Do Service Workers Even?
51mAutomating a service worker with Workbox 6