Progressive Web App

Explanation

PWAs bridge the gap between web and native apps. The two key technologies are the Service Worker (a JavaScript file that runs in the background, separate from the main browser thread, intercepting network requests and enabling offline caching) and the Web App Manifest (a JSON file describing the app's name, icon, theme color, and display mode). A service worker acts as a programmable network proxy: when the app makes a fetch request, the service worker intercepts it and can return a cached response, fetch from the network, or implement strategies like "cache first, fall back to network" or "network first, fall back to cache." This is what enables offline functionality — cached resources are served even without a network connection. Installation: when a PWA meets certain criteria (served over HTTPS, has a manifest, has a registered service worker), the browser can prompt users to "Add to Home Screen." Installed PWAs launch from the home screen in their own window (no browser chrome), look and feel like native apps, and can receive push notifications. PWAs are a pragmatic middle ground: you maintain one codebase (web), users don't need to install from an app store, updates deploy instantly (no app store review), and you get native-like capabilities. The trade-off: PWAs have access to fewer device APIs than native apps, iOS support has historically lagged behind Chrome/Android, and the install flow is less visible than an App Store listing.

Code Example

// Service Worker registration (in main app code)
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('SW failed:', err));
  });
}

// sw.js — Service Worker (cache-first strategy)
const CACHE = 'app-v1';
const ASSETS = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', e => {
  e.waitUntil(
    caches.open(CACHE).then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', e => {
  e.respondWith(
    caches.match(e.request).then(cached => {
      return cached ?? fetch(e.request).then(response => {
        const clone = response.clone();
        caches.open(CACHE).then(c => c.put(e.request, clone));
        return response;
      });
    })
  );
});

// manifest.json
// {
//   "name": "My PWA",
//   "short_name": "App",
//   "start_url": "/",
//   "display": "standalone",
//   "theme_color": "#6366f1",
//   "icons": [{ "src": "/icon-192.png", "sizes": "192x192" }]
// }

Why It Matters for Engineers

PWAs are a compelling architecture for apps targeting users in markets with unreliable internet (offline-first design) or for teams that can't maintain separate native apps. Many large-scale success stories — Twitter Lite, Starbucks, Pinterest — are PWAs that dramatically improved performance and engagement on mobile web. Understanding service workers also gives you fine-grained control over caching and network behavior that goes beyond what HTTP Cache-Control headers provide. The ability to intercept every network request and decide how to respond is powerful for performance optimization, offline experiences, and background sync.