⚡
Service Worker Lifecycle — The Order of install, activate, fetch
The core of PWA — how offline caching works
Lifecycle
- register — download SW file
- install — first-time setup, pre-cache static resources
- waiting — waits if previous SW still active.
skipWaiting()for immediate activation - activate — clean old caches
- fetch — intercept all network requests
Cache Strategies
Cache First — static resources
Network First — API responses
Stale While Revalidate — speed + freshness balance
Warning
SW only works on HTTPS (localhost exception). Once registered, persists permanently. Buggy SW deployment means bugs persist until user clears cache.
Key Points
1
register → install (pre-cache) → activate (clean old caches) → fetch (intercept requests)
2
Choose cache/network strategy in fetch event (Cache First, Network First, etc.)
3
HTTPS required (localhost exception). skipWaiting() + clients.claim() for immediate activation
4
SW update strategy is critical — buggy SW can persist permanently
Use Cases
PWA — web apps that work offline
Static site caching — instant loading for blogs/docs sites