What a PWA is

A Progressive Web App is a regular site with three additions.

  • HTTPS (or localhost during development). A service worker only runs in a secure context.
  • Web App Manifest: a JSON file with the name, icons, colours and start URL.
  • Service Worker: a script that sits between the page and the network, intercepts requests and can answer them from a cache.

As a result the site can be installed to the home screen, opens in its own window and keeps working without a connection. Note that a service worker has no window and no DOM; inside it the global object is self, and the Cache API is available as caches.

Manifest and installation

The manifest tells the browser how the app should look once installed. Link it from every page:

html
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">
json
{
  "name": "Prowid Notes",
  "short_name": "Notes",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#2563eb",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512",
      "type": "image/png", "purpose": "maskable" }
  ]
}
FieldMeaning
name, short_nameFull name and the short label under the icon
start_urlThe page opened from the icon; a ?source=pwa query helps analytics
displaystandalone hides the address bar; browser keeps a normal tab
icons192 and 512 px are the usual minimum; maskable adapts to round or squircle shapes

💡 Installability rules differ between browsers, so test in the target browsers. Offline work needs a service worker in any case.