📱 PWA Architecture and Capabilities

What Is a Progressive Web App?

A Progressive Web App (PWA) is a website built with a set of browser capabilities that let it feel like a platform app: it can be installed, run offline, and behave reliably on flaky networks. There is no PWA framework to install and no app store to submit to — a PWA is a capability profile, not a new kind of project. Any React, Angular, Vue, or hand-written site can become one.

The word progressive comes from progressive enhancement: you build a baseline that works everywhere, then layer on advanced features for browsers that support them. A browser that lacks service workers still gets a working website; a modern one additionally gets offline support and installability.

💡 A useful analogy: A PWA is like a hybrid car. On the open highway (a modern browser) it uses every system it has. When conditions get worse (an old browser, a dead network) it quietly falls back to the essentials and still gets you where you're going — it never simply stops.

The term was coined in 2015 by Alex Russell and Frances Berriman to name a pattern that was already emerging. Since then, companies from Twitter to Starbucks have shipped PWAs to cut load times and data usage while maintaining a single codebase for web and "app."

The Three Technical Pillars

Three requirements turn a site into an installable, offline-capable PWA. Miss any one and the browser will not offer to install it.

1. HTTPS — a secure origin

Service workers can intercept every request your page makes, so the browser only allows them on secure origins. In practice that means HTTPS in production (and http://localhost during development, which the browser treats as secure). HTTPS also protects the integrity of the code the browser caches.

2. The web app manifest

A small JSON file that tells the browser what to display when the app is installed — its name, icons, colors, and how it should launch. Without it, there is nothing to install. We cover it in detail next.

3. The service worker

A background JavaScript file that acts as a programmable network proxy. It can serve cached responses when the network is down, sync data later, and receive push messages. This is the topic of the next lesson.

The Web App Manifest

The manifest is a JSON file (conventionally manifest.webmanifest, though .json also works) linked from every page:

<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2f3ba2">

A minimal but installable manifest needs a name, a start URL, a standalone display mode, and at least a 192px and a 512px icon (a maskable icon is strongly recommended so Android can crop it to the device's icon shape):

{
  "name": "Weather Now",
  "short_name": "Weather",
  "description": "Fast, offline-capable weather forecasts",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#3e4eb8",
  "theme_color": "#2f3ba2",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

You do not have to hand-write eight icon sizes anymore. Modern builds generate them from a single source: Vite PWA and the Angular and CLI generators emit the manifest and icons for you. What matters is understanding what those fields do.

Installability & the Install Prompt

When a site meets the install criteria (HTTPS, a valid manifest, and — on Chromium — a registered service worker with a fetch handler), the browser fires a beforeinstallprompt event. Capturing it lets you show your own install button at a moment that makes sense, instead of the browser's default mini-banner.

let deferredPrompt = null;
const installButton = document.querySelector('#install-btn');

// The browser wants to show its install prompt — intercept it.
window.addEventListener('beforeinstallprompt', (event) => {
  event.preventDefault();          // suppress the automatic mini-infobar
  deferredPrompt = event;          // stash it for later
  installButton.hidden = false;    // reveal our own button
});

installButton.addEventListener('click', async () => {
  if (!deferredPrompt) return;
  deferredPrompt.prompt();                       // show the native dialog
  const { outcome } = await deferredPrompt.userChoice;
  console.log(`User response: ${outcome}`);      // 'accepted' | 'dismissed'
  deferredPrompt = null;                          // it can only be used once
  installButton.hidden = true;
});

// Fires after a successful install (from your button OR the browser menu).
window.addEventListener('appinstalled', () => {
  installButton.hidden = true;
  console.log('PWA installed');
});

User response: accepted
PWA installed

Capabilities Beyond the Browser

Once installed and backed by a service worker, a PWA unlocks capabilities that used to require a native app.

Architecture Patterns

The app-shell model

Split your app into a shell — the header, navigation, and layout that rarely change — and the content that fills it. Cache the shell on first visit so subsequent loads paint instantly from the cache while fresh content streams in over the network.

The PRPL pattern

PRPL is a performance-oriented delivery strategy. Modern bundlers automate most of it, but knowing the intent helps you configure them:

• Push / preload the critical resources for the first route
• Render that initial route as fast as possible
• Pre-cache the remaining routes in the service worker
• Lazy-load everything else on demand via code-splitting

Hands-on Exercise

// sw.js — the smallest SW that makes Chrome offer installation
self.addEventListener('install', () => self.skipWaiting());
self.addEventListener('activate', (e) => e.waitUntil(clients.claim()));
self.addEventListener('fetch', (event) => {
  // A fetch handler must exist for installability; pass through for now.
  event.respondWith(fetch(event.request));
});

Best Practices

Summary & Quiz

📚 Further Reading

• web.dev — Progressive Web Apps
• MDN — Progressive web apps
• web.dev — Add a web app manifest
• Chrome — Lighthouse overview

🚀 What's Next?

You now know what a PWA is and which pieces make it installable. Next we go deep on the engine behind offline behavior — the service worker: its lifecycle, how it intercepts fetches, and the caching strategies you'll reach for.