Service Worker

Also Known As

TL;DR

Explanation

A service worker is a type of web worker registered against an origin and scope. It runs in its own thread, has no DOM access, and persists beyond the page lifecycle. Its primary power is the fetch event — every network request from pages in its scope passes through the service worker, allowing it to serve cached responses, fall back to the network, or return custom responses. The service worker lifecycle has three states: installing (downloading and caching assets), waiting (ready but not yet active), and active (controlling pages). Cache strategies implemented in service workers include: cache-first (serve from cache, fall back to network), network-first (try network, fall back to cache), and stale-while-revalidate (serve cache immediately, update in background).

Common Misconception

Why It Matters

Common Mistakes

• Placing the service worker script in a subdirectory — a service worker at /app/sw.js only controls pages under /app/; place it at /sw.js to control the entire origin.
• Not versioning the cache name — when you update assets, increment the cache version string to trigger installation of a new worker and deletion of the old cache.
• Caching API responses that should never be stale — use network-first or stale-while-revalidate for dynamic data, not cache-first.
• Not handling the activate event to delete old caches — old cache versions accumulate and consume disk space if not cleaned up.

Code Examples

// Empty service worker — does nothing
self.addEventListener('install', () => {});
self.addEventListener('fetch', () => {});
// User gets no offline support despite registration

const CACHE = 'app-v1';
const ASSETS = ['/', '/style.css', '/app.js', '/offline.html'];

// Cache assets on install
self.addEventListener('install', e => {
    e.waitUntil(caches.open(CACHE).then(c => c.addAll(ASSETS)));
});

// Delete old caches on activate
self.addEventListener('activate', e => {
    e.waitUntil(caches.keys().then(keys =>
        Promise.all(keys.filter(k => k !== CACHE).map(k => caches.delete(k)))
    ));
});

// Cache-first with network fallback
self.addEventListener('fetch', e => {
    e.respondWith(
        caches.match(e.request)
            .then(cached => cached || fetch(e.request))
            .catch(() => caches.match('/offline.html'))
    );
});

Tags

🧠 Logic Engine

References

• https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API