Stop 20 · Advanced TopicsTopics · 2/14

PWA

In short

A Progressive Web App is a website that can be installed on a phone's home screen, open in its own window and keep working on a weak network. No app store needed.

Progressive Web App — a set of techniques (manifest, service worker, HTTPS) that let a website be installed and behave like a native app, including offline support.

The jaadu pulls up the shutter of a small new shop, with its old street cart parked beside it.

Think of it like this

The street stall that got a shop

Same owner, same food, but now there's a proper signboard, a shutter and a stock room for when supplies don't arrive. A PWA is your website upgraded the same way: an icon, its own window and a stock of cached files.

Watch it happen

From website to installed app

HTTPS

Manifest

Worker

Install

Offline

1/5Your site is served over HTTPS. Without it, service workers won't register.

The big ideas

What you need to know

Web app manifest

A JSON file with the app's name, icons, colours and how it should open.

Service worker

A background script that caches files and handles requests, so the app works offline or on bad networks.

HTTPS required

Service workers only run on secure origins. localhost is allowed for development.

Install varies by browser

Chromium browsers can show an install prompt. On iPhone, users add it through Share, then Add to Home Screen.

See it in code

Walk through the code

json

1{2  "name": "InsideEdge Notes",3  "short_name": "Notes",4  "start_url": "/",5  "display": "standalone",6  "theme_color": "#7E39FE",7  "background_color": "#ffffff",8  "icons": [9    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },10    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }11  ]12}

1/4The full name, and a short one for under the home screen icon.

Link it from your HTML with <link rel="manifest" href="/manifest.webmanifest">. display: standalone opens the app without the browser's address bar.

Save yourself the pain

Common mistakes

Oops

Adding a manifest and calling it a PWA, with nothing working offline.

Do this instead

Add a service worker that caches at least the app shell, and show a friendly offline page.

Oops

Expecting the same install button on every device.

Do this instead

Detect support and show your own install hint. On iOS, explain the Add to Home Screen steps.

Your mission

Make your project installable

~30 min

Quick check

Your PWA works on localhost but the service worker won't register on your deployed http:// site. Why?

Go deeper

1Add a web app manifest to a project and 'install' it on your phone or desktop.
2Run Lighthouse's PWA audit and address the flagged requirements.
3Learn the minimum requirements: HTTPS, a manifest, and a registered service worker.