What Makes a Website a Progressive Web App?
A Progressive Web App is still a website. It can also work offline, be installed on some devices, and use selected app-like features where the browser supports them.
That last part matters. PWA capabilities vary by browser and operating system, so this is better thought of as progressive enhancement than as a way to make the web identical to a native app.
The two pieces you will usually add
A web app manifest describes how the site should behave when installed. A minimal one looks like this:
{
"name": "My PWA",
"short_name": "My PWA",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff"
}
The manifest supplies the name, icons, starting page, colours, and preferred display mode. It does not make the site work offline by itself.
That job normally involves a service worker. A service worker runs separately from the page and can intercept network requests. This deliberately small example caches a few files during installation, then returns a cached response when one exists:
self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('my-app-cache').then((cache) => cache.addAll([
'/',
'/styles.css',
'/script.js'
]))
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
return response || fetch(event.request);
})
);
});
Real cache handling needs more thought. Cached files must be updated, failed requests need sensible behaviour, and not every response should be stored forever. A stale application shell is not a particularly charming app-like experience.
What changes for the user
Depending on the platform, a PWA may offer:
- an icon on the home screen or application launcher;
- a standalone window without normal browser controls;
- useful offline or poor-network behaviour;
- push notifications and background features where supported.
The site should still work as an ordinary website when those features are missing. That is the progressive part of the name and, in my view, the part worth protecting.
Do you need one?
An installable experience makes sense for products people return to often, and offline support can be genuinely useful for travel, field work, or unreliable connections. A small brochure site probably does not need a service worker merely to earn a PWA label.
Start with a fast, accessible website served over HTTPS. Add a manifest when installation helps, and add a service worker when you have a clear caching or offline plan. The technology is useful; the acronym is not the goal.