PWA Install Demo

See exactly how a web app gets added to your phone or desktop.

Running in a browser tab — not installed yet.

Install this app

When your browser decides the app is installable, it fires a beforeinstallprompt event. We catch it and light up this button.

The button enables automatically once the browser says the app qualifies.

On iPhone / iPad (Safari): iOS doesn't expose an install button to web pages. Tap the Share button then choose “Add to Home Screen”. The app icon above becomes your home-screen icon.

Installability checklist — live

Browsers require all of these before they'll offer to install a PWA.

…
Secure contextServed over HTTPS or localhost
…
Web app manifestLinked and parsed, with name + icons
…
Icons ≥ 192px & 512pxThe image added to your home screen
…
Service workerRegistered with a fetch handler (enables offline)
…
Install prompt availableBrowser fired beforeinstallprompt

How PWA install works

The whole flow, start to finish.

You visit the page.
The browser loads the HTML, finds the <link rel="manifest">, and reads the app's name, colors, and icons.
A service worker registers.
It caches the app shell so the app can launch even with no network.
The browser checks the criteria.
Secure context, valid manifest, required icon sizes, active service worker — the checklist above.
An install prompt becomes available.
The browser fires beforeinstallprompt. The page saves it and shows a custom Install button.
You tap Install.
The page calls prompt() on the saved event. The browser shows its native install dialog.
The icon lands on your device.
The manifest icon (a PNG built from the favicon) is added to the home screen or app drawer. Launching it opens in a standalone window — no browser chrome.