PWA Caching Strategies

Technical Deep Dive & Specifications

The 5 Core Caching Strategies

+----------------------------------------------------------------------------------------------------+
| 1. CACHE-FIRST (Cache Falling Back to Network)                                                     |
| Best for: Hashed static assets (bundle.8a7f.js, styles.css, fonts, webp images)                   |
| Request ===> Check Cache? ===[Hit]===> Return Cached Response                                      |
|                     |                                                                              |
|                  [Miss] ===> Fetch from Network ===> Put into Cache ===> Return Network Response   |
+----------------------------------------------------------------------------------------------------+

+----------------------------------------------------------------------------------------------------+
| 2. NETWORK-FIRST (Network Falling Back to Cache)                                                   |
| Best for: Frequently updated data (user inbox, real-time analytics, dynamic HTML)                  |
| Request ===> Fetch Network ===[Success]===> Update Cache ===> Return Network Response             |
|                     |                                                                              |
|                  [Failure/Offline] ===> Return Cached Response (Fallback)                          |
+----------------------------------------------------------------------------------------------------+

+----------------------------------------------------------------------------------------------------+
| 3. STALE-WHILE-REVALIDATE (Instant Cache + Background Network Refresh)                              |
| Best for: Non-critical dynamic content (avatars, news lists, category feeds)                       |
| Request ===> Return Cached Response IMMEDIATELY (Fastest UX)                                       |
|                     +======> [Background Thread] Fetch Network ===> Update Cache for Next Visit    |
+----------------------------------------------------------------------------------------------------+

+----------------------------------------------------------------------------------------------------+
| 4. NETWORK-ONLY                                        | 5. CACHE-ONLY                             |
| Best for: Non-idempotent POST/PUT, payment APIs        | Best for: Fixed App Shell & offline page  |
| Request ===> Network (Bypasses Cache entirely)        | Request ===> CacheStorage (Never touches  |
|                                                        |               network)                    |
+----------------------------------------------------------------------------------------------------+

Comparison Matrix

The Response Stream Cloning Rule (response.clone())

The Fetch API Response object is a single-use readable stream (ReadableStream). Once the browser consumes the stream to paint the UI or parse JSON, the stream is locked and cannot be read a second time.

                      +-----------------------------+
                      |   Network Fetch Response    |
                      +-----------------------------+
                                     |
                          [ Call response.clone() ]
                                     |
                   +-----------------+-----------------+
                   |                                   |
                   v                                   v
        +---------------------+             +---------------------+
        | Stream 1: Original  |             |  Stream 2: Clone    |
        | Return to Browser   |             | Put into Cache      |
        | window for DOM      |             | storage bucket      |
        +---------------------+             +---------------------+

// MUST clone response before putting it into cache!
const networkResponse = await fetch(event.request);
const clonedResponse = networkResponse.clone();
await cache.put(event.request, clonedResponse);
return networkResponse;

💻 Interactive Code Playground

Starter Code: Production Multi-Strategy Router

Below is a complete, modular Service Worker demonstrating dynamic strategy routing based on request destination and URL patterns.

Line-by-Line Code Breakdown

• Line 37 (request.destination): Uses standard Fetch metadata ('style', 'script', 'font', 'image') to cleanly route static resources without brittle regex file extensions.
• Line 43 (url.pathname.startsWith('/api/feed')): Routes API read feeds through Stale-While-Revalidate for instantaneous UI response.
• Line 49 (request.mode === 'navigate'): Identifies browser address bar URL changes and page reloads to execute Network-First with App Shell fallback.
• Line 66 (cache.put(request, networkResponse.clone())): Clones the response stream before persisting it in CacheStorage, allowing the original stream to be returned to the DOM.
• Line 104 (return cachedResponse || networkFetch): Implements the Stale-While-Revalidate magic: returns cached bytes immediately while the background promise networkFetch updates storage concurrently.

Expected Browser Render Output

// sw.js - Production Multi-Strategy Routing Engine
const STATIC_CACHE = 'static-assets-v1';
const DYNAMIC_CACHE = 'dynamic-content-v1';

// 1. Install & Precache core assets
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(STATIC_CACHE).then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/app.js'
      ]);
    })
  );
  self.skipWaiting();
});

// 2. Activate & Purge
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) => {
      return Promise.all(
        keys.map((key) => {
          if (key !== STATIC_CACHE && key !== DYNAMIC_CACHE) {
            return caches.delete(key);
          }
        })
      );
    }).then(() => self.clients.claim())
  );
});

// 3. Dynamic Strategy Router
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // Strategy A: Cache-First for static assets (CSS, JS, Fonts, Images)
  if (['style', 'script', 'font', 'image'].includes(request.destination)) {
    event.respondWith(cacheFirstStrategy(request));
    return;
  }

  // Strategy B: Stale-While-Revalidate for API Feed requests
  if (url.pathname.startsWith('/api/feed')) {
    event.respondWith(staleWhileRevalidateStrategy(request));
    return;
  }

  // Strategy C: Network-First for HTML navigation and user profiles
  if (request.mode === 'navigate' || url.pathname.startsWith('/api/user')) {
    event.respondWith(networkFirstStrategy(request));
    return;
  }

  // Default: Network Only
  event.respondWith(fetch(request));
});

// Strategy Implementation: CACHE-FIRST
async function cacheFirstStrategy(request) {
  const cachedResponse = await caches.match(request);
  if (cachedResponse) {
    return cachedResponse;
  }
  try {
    const networkResponse = await fetch(request);
    if (networkResponse.status === 200) {
      const cache = await caches.open(STATIC_CACHE);
      cache.put(request, networkResponse.clone());
    }
    return networkResponse;
  } catch (err) {
    return new Response('Asset unavailable offline', { status: 408 });
  }
}

// Strategy Implementation: NETWORK-FIRST
async function networkFirstStrategy(request) {
  try {
    const networkResponse = await fetch(request);
    if (networkResponse.status === 200) {
      const cache = await caches.open(DYNAMIC_CACHE);
      cache.put(request, networkResponse.clone());
    }
    return networkResponse;
  } catch (err) {
    const cachedResponse = await caches.match(request);
    if (cachedResponse) {
      return cachedResponse;
    }
    // Fallback for HTML navigations
    if (request.mode === 'navigate') {
      return caches.match('/index.html');
    }
    return new Response(JSON.stringify({ error: 'Offline', offline: true }), {
      headers: { 'Content-Type': 'application/json' },
      status: 503
    });
  }
}

// Strategy Implementation: STALE-WHILE-REVALIDATE
async function staleWhileRevalidateStrategy(request) {
  const cache = await caches.open(DYNAMIC_CACHE);
  const cachedResponse = await cache.match(request);

  // Background fetch to refresh the cache
  const networkFetch = fetch(request).then((networkResponse) => {
    if (networkResponse.status === 200) {
      cache.put(request, networkResponse.clone());
    }
    return networkResponse;
  }).catch(() => {
    // Network failed, silent catch for background revalidation
  });

  // Return cached version immediately if present, otherwise await network
  return cachedResponse || networkFetch;
}

(First Page Load - Online):
[Network] GET /styles/main.css -> 200 OK (Downloaded & Cached in static-assets-v1)
[Network] GET /api/feed -> 200 OK (Downloaded & Cached in dynamic-content-v1)

(Second Page Load - Instantaneous):
[SW] GET /styles/main.css -> (Served from ServiceWorker Cache: 2ms)
[SW] GET /api/feed -> (Served from ServiceWorker Cache: 3ms)
[SW Background] GET /api/feed -> 200 OK (Cache updated silently for next visit)

(Third Page Load - Airplane Mode / Offline):
[SW] GET /index.html -> (Network failed -> Fallback to cached index.html)
[SW] GET /styles/main.css -> (Served from ServiceWorker Cache)