Progressive Web Apps (PWA): Service Workers & Offline Synchronization

1. Service Worker Architecture: The Programmable Network Proxy

A Service Worker is an event-driven, programmable client-side proxy that executes in a dedicated background worker thread, completely decoupled from the main DOM execution thread. Because it runs independently of browser tab lifecycles, a Service Worker can intercept, modify, and respond to every HTTP request dispatched by the web application:

• Registration Phase: The main thread registers the service worker file (e.g., navigator.serviceWorker.register('/sw.js')). Registration defines the worker's scope, governing which URL paths the worker controls.
• Installation Phase (install event): Triggered when a new service worker file is detected. The worker pre-caches critical static shell assets (HTML shell, CSS bundles, JS runtimes, brand logos) into the CacheStorage API. Calling self.skipWaiting() allows the new worker to activate immediately without waiting for existing tabs to close.
• Activation Phase (activate event): The worker purges obsolete cache versions from previous releases, guaranteeing clean disk space, and invokes clients.claim() to take immediate control of all open browser tabs.
• Fetch Interception Phase (fetch event): The worker intercepts every network request, inspecting cached assets and deciding dynamically whether to serve cached responses or query origin servers.

2. CacheStorage Caching Strategies & Offline Queues

Production PWAs implement distinct, specialized caching strategies tailored to different resource types:

• Cache-First (Static Assets): For immutable, content-hashed JavaScript chunks, CSS stylesheets, and font files (e.g., /static/bundle.8f9b2a.js). The worker queries CacheStorage first; if found, it returns the asset with sub-5ms latency, completely bypassing network round-trips. It queries the network only on cache misses.
• Stale-While-Revalidate (Content Feeds): For dynamic data like blog articles, product catalogs, and dashboard summaries. The worker immediately returns the cached stale version to render the UI instantly, while concurrently firing a background network request to fetch fresh data and update the cache for the next visit.
• Network-First with Cache Fallback (User Data): For frequently mutating user transactions (e.g., live bank balances, flight status). The worker attempts the live network first; if the network fails or times out after 3,000ms, it falls back to the last cached snapshot.
• Background Sync & IndexedDB Mutation Queuing: When a user submits an offline form (such as submitting an order or sending a message while in a subway tunnel), the application serializes the mutation into client-side IndexedDB and registers a sync tag with the Background Sync API (registration.sync.register('sync-orders')). When the browser detects network restoration, the Service Worker wakes up in the background and replays the queued POST requests automatically.

3. Web App Manifest & OS-Native Installability

To enable the native browser install prompt ("Add to Home Screen"), applications must serve a valid Web App Manifest JSON file linked via <link rel="manifest" href="/manifest.json">. To satisfy Chromium and WebKit PWA installability criteria, the manifest must declare:

• name and short_name for operating system application launchers.
• display: "standalone" to remove the browser URL bar and navigation buttons, presenting a true native app viewport.
• theme_color and background_color matching application branding for native splash screens and system status bars.
• High-resolution maskable icons (192x192 and 512x512 PNGs) that adapt automatically to Android adaptive circular icons and iOS squircle grids.
• Rich screenshots for modern mobile and desktop application installation dialogs.

4. Technical Comparison: PWA vs. Native Mobile vs. Hybrid Apps

5. Production Implementation: Service Worker with Stale-While-Revalidate

The following production JavaScript implementation demonstrates a robust Service Worker implementing Cache-First for static assets, Stale-While-Revalidate for API endpoints, and clean cache version migration:

// public/sw.js
const CACHE_VERSION = 'v1.4.2';
const STATIC_CACHE = `static-${CACHE_VERSION}`;
const DATA_CACHE = `data-${CACHE_VERSION}`;

const PRECACHE_ASSETS = [
  '/',
  '/offline.html',
  '/stylesheets/styles.css',
  '/images/logo.svg',
  '/favicon.ico'
];

// Install: Pre-cache application shell
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(STATIC_CACHE).then((cache) => {
      return cache.addAll(PRECACHE_ASSETS);
    }).then(() => self.skipWaiting())
  );
});

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

// Fetch: Strategy dispatcher
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // Strategy 1: Stale-While-Revalidate for API endpoints
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(
      caches.open(DATA_CACHE).then(async (cache) => {
        const cachedResponse = await cache.match(request);
        const networkFetch = fetch(request).then((networkResponse) => {
          if (networkResponse.ok) {
            cache.put(request, networkResponse.clone());
          }
          return networkResponse;
        }).catch(() => cachedResponse);

        return cachedResponse || networkFetch;
      })
    );
    return;
  }

  // Strategy 2: Cache-First for static assets and navigation shell
  event.respondWith(
    caches.match(request).then((cachedResponse) => {
      if (cachedResponse) {
        return cachedResponse;
      }
      return fetch(request).catch(() => {
        if (request.mode === 'navigate') {
          return caches.match('/offline.html');
        }
      });
    })
  );
});

Frequently Asked Questions: Progressive Web Apps