Help centre
Answer
How do you add a PWA to the home screen on iPhone?
Short answer
On iPhone or iPad, open the site in Safari, tap the Share icon, scroll down and tap "Add to Home Screen", then tap "Add". Safari never shows an automatic install banner — the install must always be initiated manually from the Share sheet, and it only works in Safari, not third-party browsers.
By InstantPWA engineering·Reviewed July 25, 2026
Why it must be manual
iOS Safari does not implement the beforeinstallprompt event, so developers cannot trigger the native install flow programmatically — only guide users to the Share sheet.
Chrome and Firefox on iOS
All iOS browsers use Apple’s WebKit engine, but only Safari exposes the "Add to Home Screen" option for installing a standalone PWA.
After installing
The icon launches in standalone mode without Safari’s address bar, and the app can then request notification permission and receive Web Push.
Related
Do PWAs work on iPhone?
Yes. Since iOS 16.4 (March 2023), iPhone and iPad support the full PWA feature set: install to home screen from Safari, standalone launch, offline via service worker, and Web Push notifications. The install step is manual — Safari does not show a browser prompt; users must tap Share → Add to Home Screen.
Can a PWA send push notifications on iOS?
Yes. Since iOS 16.4 (March 2023), a PWA can send Web Push notifications on iPhone and iPad — but only after the user installs it to the home screen. Push in a regular Safari tab is not supported, and the user must explicitly grant notification permission from inside the installed PWA.
What is the app shell architecture?
The app-shell architecture separates a PWA into two parts: a minimal "shell" of static UI (navigation, layout, styles) that a service worker caches and loads instantly on repeat visits, and dynamic content fetched separately from the network. This makes the app feel instant even before data loads.
What is the difference between a PWA and a regular website?
Technically, a PWA is just a regular website that additionally serves over HTTPS, links a Web App Manifest, and registers a service worker. Nothing about the HTML, CSS or JS changes — the difference is entirely in those three additions, which unlock installability, offline caching and push notifications.
How do you test a PWA with Lighthouse?
Open Chrome DevTools, go to the Lighthouse panel, select the categories you want (Performance, PWA-related checks live under "Best Practices" in modern Lighthouse) and click "Analyze page load". Lighthouse reports whether your manifest is valid, whether a service worker is registered, and whether the page is served over HTTPS.