PWA

Progressive Web App

Updated September 30, 20262 min read

In short

A PWA is a website built with modern web APIs so it can be installed on a device, work offline, and behave much like a native app from a single codebase.

What is a PWA?

A progressive web app is a regular website that uses a set of browser features to feel more like an installed app. Users can add it to their home screen or desktop, open it in its own window without the browser's address bar, and in many cases keep using it with a poor or missing internet connection.

Three pieces make this work. The site must be served over HTTPS; a web app manifest, a small JSON file, describes the app's name, icons, colors, and start URL; and a service worker, a script the browser runs in the background separate from the page, can intercept network requests, cache files for offline use, and receive push notifications. The word progressive means the app still works as a normal website in browsers that lack some of these features.

Think of a PWA as a website that learned to pack a suitcase: it keeps copies of what it needs so it can keep working away from the network. PWAs are popular for news sites, online stores, productivity tools, and any app that needs to reach many devices without separate iOS and Android versions.

A PWA is not the same as a native app. It runs in the browser engine and can use only the device features the browser exposes, and support varies by platform, with some features, such as background sync, more limited on iOS than on Android and desktop. PWAs can sometimes be listed in app stores through wrapper tools, but they are still web apps underneath.

Key takeaways

A PWA is a website that can be installed and used like an app.
It needs HTTPS, a web app manifest, and a service worker.
Service workers cache files so the app can work offline.
One codebase serves browsers, phones, and desktops.
Available device features depend on the browser and platform.

Example

Registering a service worker for offline supportjavascript

// main.js: register the service worker if the browser supports it
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

// sw.js: cache key files at install, then serve them when offline
self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open("v1").then((cache) => cache.addAll(["/", "/app.css", "/app.js"]))
  );
});
self.addEventListener("fetch", (event) => {
  event.respondWith(caches.match(event.request).then((hit) => hit || fetch(event.request)));
});

Readers ask

What is the difference between a PWA and a native app?

A native app is written for a specific platform such as iOS or Android and installed from an app store, with full access to device features. A PWA is built with web technologies, runs in the browser engine, and can be installed straight from a website, but it can use only the features the browser allows.

Do PWAs work on iPhone?

Yes. On iOS and iPadOS, users can add a PWA to the home screen from the browser's Share menu, and home screen web apps can receive push notifications. Some features available on Android and desktop, such as background sync, are more limited.

What is a service worker?

A service worker is a JavaScript file that the browser runs in the background, separate from the web page. It can intercept network requests, serve cached responses when the device is offline, and handle push notifications.

PWA