Now THAT'S What I Call Service Worker!
summary
Shows how to use Workbox streams plus the Cache Storage and Streams APIs to precache header/footer markup and stream it with a network-first content partial, using navigation preload and a custom x-content-mode header for server routing. Lab results: 90th-percentile FCP drops from ~2.7s to 584ms (~80%); LCP from ~2.8s to ~2.0s (28%); TTFB from 1.85s to ~187ms (~90% reduction). Implementation is ~75 lines of service worker code (~20KB bundle) and requires title/updating and slow-connection loading UI handling.
AI-written summary · about
chapters (4)
- 0:00Start
- 2:27A quick service worker primer.
- 4:36A tale of two navigation patterns.
- 40:04Spinners gonna spin.
related talks
30mBuilding Faster, More Resilient Apps with Service Worker: A Caching Strategy Deep Dive
32mThe ServiceWorker is coming, look busy
27mAnd Now You Understand Service Workers
45mThe perfect Service Worker. How to design it?
51mAMP, PWAs, HTTP/2 and Service Workers: A New Era of Web Performance?
13mLeveraging Stream API within Service Worker
38mImproving Media Content Performance with Service Workers
35mTame your service worker [...]