PusharooPWA push notifications on iOS and Android
A Progressive Web App is just a website with a manifest and a service worker — and that’s exactly what push needs. On iPhone, being installable isn’t optional: it’s the only way to receive web push.
- A PWA needs a web app manifest, a service worker and HTTPS — the same building blocks push uses.
- iPhone and iPad receive web push only when the site is added to the Home Screen (iOS/iPadOS 16.4+).
- Android and desktop can receive push from a normal tab; installing is optional.
- Your manifest needs display: standalone (or fullscreen) and proper icons for iPhone push to work.
What makes a site a PWA
| Piece | Role in push |
|---|---|
| HTTPS | Required for service workers and the Push API |
| Web app manifest | Name, icons and display mode; makes the site installable |
| Service worker | Receives push events and shows notifications |
| Icons | Used on the Home Screen and in notifications |
A manifest that works for push
{
"name": "Your Store",
"short_name": "Your Store",
"id": "/",
"start_url": "/",
"scope": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Link it from every page with <link rel="manifest" href="/manifest.webmanifest"> and add an apple-touch-icon. The docs include the exact tags.
PWA push on iPhone and iPad
On iOS/iPadOS 16.4+, the Push API and the Notification interface only exist inside a Home Screen web app whose manifest uses a standalone-style display. In a Safari tab, the permission request isn’t available at all. Inside the installed app, the request must follow a tap. Pusharoo detects this (Pusharoo.state() returns ios-needs-home-screen) and can show a how-to card. More in the iPhone guide.
PWA push on Android and desktop
Chrome, Edge and Samsung Internet can subscribe from a normal tab, so installing isn’t required for push. Installation still helps: the app gets its own icon, launches without browser UI and on Android may get its own notification settings. Chromium browsers offer an install button automatically when your manifest and service worker meet their criteria (Android guide).
App badges
Installed PWAs can show a number on their icon with the Badging API: navigator.setAppBadge(3) and navigator.clearAppBadge(). It’s supported in Home Screen web apps on iOS 16.4+ and in installed apps in Chromium desktop browsers. Use it for counts people care about — unread messages, items in a saved list — not as a nag.
Install prompts by platform
| Platform | How people install |
|---|---|
| Chrome / Edge desktop | Install icon in the address bar, or your own button using beforeinstallprompt |
| Android Chrome | Install banner or menu → Add to Home screen / Install app |
| iPhone / iPad | Share → Add to Home Screen (no install event; show instructions) |
| macOS Safari | File → Add to Dock (Sonoma and later) |
Installation isn’t required for push except on iPhone and iPad, but installed apps get their own notification settings and icon badges.
Scope, start_url and existing workers
Keep scope and start_url at / unless your app truly lives in a subfolder; a push worker registered at the root then covers the whole app. If your PWA already has a caching worker (Workbox or a framework’s), don’t register a second one on the same scope — add push handling to the existing worker, or import a provider’s worker into it as the docs show.
Framework guides
Step-by-step for React/Next.js, Vue/Nuxt, Angular, SvelteKit and Rails 8’s built-in PWA files.
PWA push setup checklist
- Site served over HTTPS.
/manifest.webmanifestwith name, icons and"display": "standalone", linked from every page.- Service worker at the root (
/sw.js) so its scope covers the whole site. - Permission requested only after a tap.
- Tested on Android Chrome and on iPhone from the Home Screen icon.
Questions
Do PWAs support push notifications on iPhone?
Yes, on iOS/iPadOS 16.4 and later, once the PWA is added to the Home Screen and opened from its icon.
Does my site need to be a PWA to send web push?
On Android and desktop, no — a service worker is enough. On iPhone, effectively yes: it must be installable and added to the Home Screen.
Do PWA push notifications work when the app is closed?
Yes. The service worker is woken by the push service even when the PWA isn’t open.
Does my PWA need to be installed for push?
On Android and desktop, no. On iPhone and iPad, yes: only Home Screen web apps can subscribe.
Can a PWA show a badge count?
Yes on supporting platforms: navigator.setAppBadge() sets a badge on the installed app icon.
Keep reading
Web push on iPhone and iPad, explained honestly
The Home Screen rule, the manifest you need, and how to guide iPhone visitors without friction.
Web push notifications on Android
Chrome, Samsung Internet, Firefox and Edge on Android, the Android 13 permission and battery savers.
Service worker push events, done right
push and notificationclick handlers, focusing open tabs, action buttons, subscription changes and pitfalls.
Declarative Web Push, explained
The JSON payload format, Apple platform support, how it falls back elsewhere and when to adopt it.
More in Browsers & devices: Chrome push notifications: a complete guide · Firefox push notifications: how they work · Safari push notifications on the Mac · Microsoft Edge push notifications · Web push notifications not working? Fix it by symptom · How to test web push notifications · How to turn off website notifications · Samsung Internet notifications, explained · Push notifications in Opera and Opera GX · Brave push notifications: why they fail and how to fix it · Website notifications on a Chromebook · How to get website notifications on your iPhone · All guides
Free for life. No limits.
Unlimited subscribers, campaigns and automations. No badges. About five minutes to install.