Implementing a Cache-First Service Worker in Chrome for Offline-First PWAs

To build an offline‑first experience in Chrome, register a Service Worker that pre‑caches static assets and uses a fetch listener with a cache‑first strategy to serve content from the cache when the network is unavailable.

Service Worker Lifecycle Overview

When the browser registers a Service Worker, it goes through three phases: registration (download and install), installation (ideal for pre‑caching assets), and activation (cleanup of old caches). The worker only controls pages after activation unless you call clients.claim().

Worked Example: Cache‑First Fetch Handler

const CACHE_NAME = 'v1';
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/styles/main.css',
  '/js/app.js'
];

// Installation: pre‑cache assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(ASSETS_TO_CACHE))
  );
});

// Activation: remove outdated caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => key !== CACHE_NAME).map(key => caches.delete(key))
      )
    )
  );
});

// Fetch: cache‑first strategy
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => cached || fetch(event.request))
  );
});

Verification in Chrome DevTools

1. Open DevTools (F12) and go to the Application tab.
2. Select Service Workers; ensure the worker shows running. You can enable Update on reload for testing.
3. In the Network tab, reload the page and look at the Size column; requests served by the worker display from ServiceWorker.
4. Under Application → Cache Storage, open the cache named v1 to confirm the assets listed in ASSETS_TO_CACHE are present.

Limits and Common Mistakes

• Service Workers require HTTPS (except localhost); attempting to register over plain HTTP will fail silently.
• If you forget to call event.waitUntil during installation, the worker may terminate before caching finishes, leaving the cache empty.
• Over‑caching large assets can exceed the origin’s storage quota, causing the browser to evict entries based on usage policies.
• Updating the worker without changing the script URL or skipping self.skipWaiting() can leave an old worker in control, preventing new caches from being used.