Building Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
summary
Measures show Service Worker startup costs matter: 20–100 ms startup on desktop, 100–500 ms typical on mobile with 95th percentile >1 s, and cache reads can block. Demonstrations cover Navigation Preload to parallelize network + worker, streaming partial HTML to combine cached header/footer with fresh content, and Workbox features: pre‑caching, runtime caching, Cache Expiration, and Storage Manager estimate. Concrete strategies include stale-while-revalidate and cache-first vs network-first with instrumentation via the performance timeline.
AI-written summary · about
chapters (11)
- 0:00Start
- 1:48The Costs & Benefits
- 8:49Service Worker Design
- 10:02Serving strategy
- 12:223 Ways to Speed Up Navigations
- 18:56Caching strategy
- 21:05Precaching on install
- 21:55Runtime caching
- 23:46Avoid quota overflow
- 27:13Respect the User's Resources
- 29:08Key Points
related talks
45mThe perfect Service Worker. How to design it?
36mCaching strategies and their performance footprint
32mThe ServiceWorker is coming, look busy
27mAnd Now You Understand Service Workers
42mHow Do Service Workers Even?
35mTame your service worker [...]
50mNow THAT'S What I Call Service Worker!
42mService Worker: Taking the Best From the Past Experience for The Bright Future of PWAs