Service Workers

A persistent storage mechanism specifically designed for storing Request/Response pairs. Unlike localStorage, the Cache API is asynchronous and deeply integrated with service workers, allowing developers to programmatically cache network assets for offline use. It supports multiple named caches, enabling versioned cache management strategies.

• Key methods: cache.add(), cache.put(), cache.match()
• Storage quota: Managed by the browser's storage quota system
• Typical use: Storing application shell HTML, CSS, JS, and API responses

An offline-first caching pattern where the service worker intercepts a network request and checks the Cache API before falling back to the network. If a cached response exists, it is returned immediately, eliminating network latency. If not, the request is fetched from the network, and the response is optionally cached for future use.

• Ideal for: Static assets like CSS, JS, and fonts that change infrequently
• Trade-off: Risk of serving stale content if cache invalidation is not properly managed
• Implementation: event.respondWith(caches.match(request) || fetch(request))

A caching pattern that prioritizes freshness by attempting a network fetch first. Only if the network request fails—due to offline status or timeout—does the service worker fall back to a cached response. This pattern is essential for content that must be current.

• Ideal for: API responses, news feeds, and frequently updated data
• Race condition: Implement a network timeout to avoid indefinite loading
• Fallback: Requires a pre-populated cache to serve meaningful offline content

A hybrid strategy that serves a cached response immediately for speed, while simultaneously initiating a network request to update the cache for the next visit. This pattern, formalized in the stale-while-revalidate HTTP Cache-Control extension, is natively implemented in service workers using the Cache API.

• User experience: Instant load with eventual consistency
• Update mechanism: event.waitUntil() ensures the cache update completes even if the page closes
• Common use: Application shells and content that benefits from fast display but tolerates slight staleness

A web API that enables service workers to defer network actions until the user has stable connectivity. When a user performs an action offline—such as sending a message or saving a form—the service worker registers a sync event. The browser fires this event automatically when connectivity is restored, ensuring eventual consistency without user intervention.

• Registration: navigator.serviceWorker.ready.then(reg => reg.sync.register('tag'))
• Event handler: self.addEventListener('sync', event => { ... })
• Reliability: The browser retries failed syncs with exponential backoff

A mechanism that allows servers to send messages to a service worker, which can then display a system notification to the user, even when the browser is closed. This requires the Push API for message delivery and the Notifications API for display. The service worker acts as the persistent listener, decoupled from any open web page.

• Subscription: Uses VAPID keys for application server authentication
• Event: self.addEventListener('push', event => { ... })
• User consent: Requires explicit permission grant via Notification.requestPermission()