Progressive Web Apps: Make Your Site Installable and Offline-Ready

Progressive Web Apps (PWAs) blur the line between websites and native apps. Users can install them to their home screen or desktop, open them in their own window, use them offline and get notifications, all from a normal website with no app store involved. For many products, a PWA is the fastest way to deliver an app-like experience.

What makes a site a PWA

Three ingredients:

1. HTTPS. Required for service workers. (HTTPS explained.)
2. A web app manifest describing the app: name, icons, colours, how it opens.
3. A service worker, a script that sits between your app and the network, enabling offline support and caching.

The manifest

{
  "name": "Habit Tracker",
  "short_name": "Habits",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f766e",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Link it from your HTML:

<link rel="manifest" href="/manifest.webmanifest">

display: standalone opens the installed app in its own window without browser UI. A maskable icon looks right inside the different icon shapes used by various platforms.

The service worker

Register it from your app:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
}

The service worker can intercept network requests and decide how to answer them: from the network, from a cache, or a mix.

Caching strategies

Different resources need different strategies:

• Cache first: use the cached copy if it exists; otherwise fetch. Best for hashed static assets (JS, CSS, fonts, icons) that never change at the same URL.
• Network first: try the network; fall back to cache when offline. Good for pages and API data that should be fresh.
• Stale while revalidate: answer instantly from cache, then update the cache in the background. Great for content that can be slightly out of date, like avatars or article lists.

Writing this by hand is error-prone. Libraries such as Workbox, or your framework's PWA plugin, provide these strategies with a few lines of configuration. (Caching concepts.)

An offline page at minimum

Even if full offline support isn't realistic, cache a friendly offline page and show it when the network fails, instead of the browser's default error screen. It's a small touch that makes the app feel solid.

Offline-first data

For apps people use on the move (trackers, notes, field tools), go further: store data locally in IndexedDB, update the UI instantly, and sync to the server when a connection returns. Treat the network as an enhancement, and handle conflicts when two devices change the same record. It's more work, but the user experience on flaky connections is dramatically better.

Updating the app

Service workers make updates a bit tricky: the old version keeps controlling open tabs until they close. Common approaches:

• Show a "New version available, refresh?" prompt when a new service worker is waiting.
• Version your caches and delete old ones in the activate event.
• Never cache the service worker file itself aggressively at the HTTP level.

A buggy service worker can serve stale content for a long time, so test updates carefully and keep a way to unregister it.

Installability and push notifications

Browsers offer installation when the basic requirements are met. On some platforms you can show your own "Install app" button by handling the browser's install prompt event; on others, users install through the share or browser menu, so a short instruction helps.

Web push notifications are supported across modern browsers, including for installed web apps on iOS in recent versions. Ask for permission only after the user does something that makes notifications clearly useful, never on first visit.

Honest limitations

• Some platform features available to native apps (certain background tasks, deep OS integrations) remain limited or unavailable to web apps.
• Platform support varies; Apple's platforms have historically lagged behind others in PWA features, though support has improved.
• App store discovery isn't automatic, although some stores accept packaged PWAs.

For many products (content, productivity, e-commerce, internal tools) those limits don't matter, and avoiding app-store review cycles is a real advantage.

Checking your PWA

• Chrome DevTools' Application panel shows the manifest, service worker and caches.
• Lighthouse audits installability and best practices.
• Test offline by toggling "Offline" in DevTools, then on a real phone in airplane mode. (Responsive testing tips.)

FAQ

What is a progressive web app?

A website that uses a manifest and a service worker, over HTTPS, so it can be installed like an app, work offline or on poor connections, and load faster on repeat visits.

Do PWAs work on iPhone?

Yes. iOS supports installing web apps to the home screen, service workers and, in recent versions, web push for installed apps, though some features still lag behind other platforms.

Can a PWA replace a native app?

For many content, productivity and e-commerce apps, yes. Apps that need deep hardware or OS integration, or heavy background processing, may still need native code.