Progressive Web Apps (PWA)

What lets an ordinary website behave more like a native app — installable, working offline, and launchable from a home screen.

What is it?

A regular website generally needs a live network connection and lives only inside a browser tab. But some sites are built to go further: they can be "installed" onto a device like a native app, keep working (at least partially) with no internet connection, and show up with their own icon outside the browser entirely. A site built this way is called a Progressive Web App, or PWA — "progressive" because it starts as a normal website and layers these app-like capabilities on top, rather than requiring a totally separate app to be built.

Two pieces make this possible. A manifest file is a small JSON file that describes the site as an app would describe itself — its name, its icon, its color scheme, and how it should look when launched (like hiding the browser's address bar). It's what lets a browser offer to "install" the site and lets the resulting icon look and behave like any other app icon.

The other piece is a service worker — a special script that a browser can run in the background, separately from any particular open tab, even when no tab for that site is open at all. A service worker can intercept the network requests a page makes and decide how to respond — including serving a previously saved response instead of hitting the network at all, which is exactly what lets a PWA keep working, at least partially, with no connection.

Explain like I'm 10

A manifest file is like a business card the site hands the operating system, saying 'here's my name, my icon, and how I want to be launched.' A service worker is like a receptionist who keeps working at the desk even when the office (an open tab) is empty, and who keeps a filing cabinet of past documents to hand out instantly instead of always calling out for a fresh copy.

Examples

A basic web app manifest

{
  "name": "My Task App",
  "short_name": "Tasks",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" }
  ]
}

This JSON file, linked from the page's HTML, is what tells the browser this site can be installed as an app, what icon to use, and that it should open without the usual browser address bar (display: standalone).

A service worker caching a response

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((cached) => {
      return cached || fetch(event.request);
    })
  );
});

This service worker intercepts every network request the page makes. If a matching response was previously saved in the cache, it's returned immediately, even offline; otherwise, the service worker falls back to an actual network request.

How it works

Once a page registers a service worker, the browser installs it to run independently of any specific tab, in the background, and it stays registered across visits. From then on, the service worker can listen for network requests the page makes and intercept them before they reach the network at all, deciding whether to serve a saved (cached) response, fetch a fresh one, or some combination — which is what enables offline support. The manifest file is used separately, mainly at install time, to tell the operating system how to present the app once a user chooses to install it.

Why does it exist?

PWAs exist to close the gap between websites and native apps without requiring a completely separate native app to be built and maintained for each platform. Offline support and installability were previously things only native apps could offer; service workers and manifest files let an ordinary website opt into those same capabilities using technology already built into the browser.

When to use it

Consider a PWA when users would benefit from installing your site like an app, or when your app needs to remain at least partially usable without a reliable internet connection — a good fit for things like note-taking apps, dashboards checked frequently, or tools used in places with patchy connectivity.

When not to use it

A simple content site with no real need for offline access or an app- like presence gains little from the added complexity of a service worker and manifest. Service workers also add real complexity around caching and updates — content served from a stale cache can confuse users if not managed carefully, so they're not worth adopting casually.

Common mistakes

  • Caching responses aggressively in a service worker without a plan for invalidating old data, leaving users stuck seeing stale content.

  • Assuming adding a manifest file alone makes a site work offline — that capability comes from the service worker, not the manifest.

  • Forgetting that a registered service worker keeps running and intercepting requests even after the user closes the tab, which can surprise you during development if you don't account for it.

Practice exercises

  1. Easy:

    Write a basic web app manifest file for a sample site, including a name, icon, and display mode.

  2. Medium:

    Register a simple service worker on a test page and confirm, using DevTools, that it's running independently of the open tab.

  3. Hard:

    Extend a service worker to cache a page's core files on install and serve them when the network is unavailable, then test it by going offline in DevTools.

Interview questions

What are the two core pieces that make a website installable and offline-capable as a PWA?

A web app manifest file, which describes the app's name, icon, and launch appearance, and a service worker, which can intercept network requests and serve cached responses even without a connection.

What is a service worker, and how is it different from regular page JavaScript?

A service worker is a script that runs in the background, independently of any specific open tab, and can intercept and respond to the page's network requests — unlike regular page scripts, which only run while their tab is open.

Does adding a manifest file alone make a site work offline?

No. The manifest only controls installability and how the app is presented once installed; offline behavior comes from a service worker intercepting requests and serving cached responses.