Build Offline-Capable Web Apps with Service Workers

This skill builds Progressive Web Apps (PWAs) with offline support, installability, and caching strategies. A PWA is a web application that uses modern browser capabilities to deliver a fast, reliable, and installable experience even on unreliable networks. Three pillars are required: HTTPS in production (localhost is exempt for development), a web app manifest that makes the app installable and defines its home screen appearance, and a service worker, a background script that intercepts network requests, manages caches, and enables offline use.

Every implementation must include at least five files: an index.html that links the manifest and registers the service worker, a manifest.json with full app metadata and an icon set, a sw.js service worker with install, activate, and fetch handlers, an app.js with service worker registration and install prompt handling, and an offline.html fallback page shown when navigation fails offline. A missing offline page will cause install to fail.

The guide proceeds in four steps:

1. The manifest: name, short name, description, start URL, scope, display mode, orientation, colors, icons at 192 and 512 pixels with a maskable purpose, and optional screenshots. Display standalone hides browser UI, minimal-ui shows minimal controls, and browser is a standard tab. Maskable icons enable adaptive icons on Android, so keep content in the center 80 percent. Screenshots are optional but needed for Chrome's enhanced install dialog on desktop.
2. The HTML shell, with the manifest link, theme color, and iOS-specific meta tags, because Safari does not fully use the manifest.
3. Service worker registration and an install prompt: capture the beforeinstallprompt event, show a custom install button, and handle the app installed event.
4. The service worker itself: versioned caches, pre-caching the app shell on install, cleaning old caches on activate, and choosing a caching strategy per resource type.

Use it when the user wants a web app to work offline or on unreliable networks, wants mobile-first users to install it to their home screen, asks about caching strategies, service workers, or web app resilience, mentions Workbox, manifests, background sync, or web push notifications, or asks whether a website can be installed like an app, even without the word PWA.

The input is a web project and its offline and install requirements. The output is the five deliverable files. Cache versioning is critical and must be incremented on every deploy so that activation clears old caches:

const CACHE_VERSION = 'v1';
const STATIC_CACHE = `static-${CACHE_VERSION}`;
const DYNAMIC_CACHE = `dynamic-${CACHE_VERSION}`;

The three fetch strategies are cache-first for static assets (fast, tolerates staleness), network-first for HTML pages (fresh, falling back to cache and then the offline page), and stale-while-revalidate for API data (fast and eventually fresh). Only GET requests from your own origin are handled.

Workbox, Google's PWA library, is the optional production shortcut instead of hand-rolled strategies: it handles edge cases, cache expiry, and versioning, and can be loaded from a CDN for simplicity or through npm and a bundler in production. Build tools such as Vite or Webpack can inject the cache version automatically.

Platform notes: Safari supports manifests and service workers but does not support the install prompt event, so users install through the Share menu using Add to Home Screen. Safari may clear service worker caches after about seven days of inactivity. Service workers register only on HTTPS origins, with localhost as the exception; tools such as mkcert or ngrok help with local HTTPS on custom hostnames. Opaque cross-origin responses cannot be inspected, and a failed one still gets a 200 status, so cache them with caution or prefer stale-while-revalidate.

Shipping checklist: HTTPS, a complete manifest, maskable icons, error-free service worker registration, the app shell loading from cache when the network is set to offline in DevTools, the offline page cached, a passing Lighthouse PWA audit, and testing on iOS Safari and Android Chrome.

It is for frontend and mobile-web developers who need reliable offline behavior and installability, from small sites to production apps.