🌐
GitHub
github.com › andreinwald › webpush-ios-example
GitHub - andreinwald/webpush-ios-example: WebPush for IOS demo and code: VAPID, Home Screen, gcm_sender_id, serviceworker, iPhone, iPad
self.addEventListener('push', (event) => { let pushData = event.data.json(); // ... self.registration.showNotification(pushData.title, pushData) }); self.addEventListener('notificationclick', function (event) { clients.openWindow(event.noti...
Starred by 107 users
Forked by 21 users
Languages   JavaScript 74.8% | HTML 25.2%
🌐
Engage Lab
engagelab.com › blog › ios-web-push-notifications
iOS Web Push Notifications: Overview, Set Up & Optimization
April 30, 2024 - For example, "20% off on your favorite sneakers!", "Try out the new product/feature before anyone else", and similar others are meant to make notifications valuable and special for users.
🌐
Pushalert
pushalert.co › documentation › web push notifications › ios and ipados mobile web push notifications for websites
Setup Web Push Notifications on iOS and iPadOS for Safari - PushAlert
It will show up in app switcher separate from Safari, have its own Notification settings and will receive notifications similar to other apps. Download theMP4video. Video: iOS Safari Web Push Notification Demo (iOS 16.4)
🌐
Frizbit
frizbit.com › home › blog › marketing tools › ios web push notifications: everything you need to know
iOS Web Push Notifications: Everything You Need to Know
July 4, 2024 - The service worker, which runs in the background, listens for incoming push events and displays the notification to the user. ... One key limitation of iOS web push notifications is the requirement to create a web app for the website on the home screen.
🌐
Webpushtest
webpushtest.com
Web Push Notifications on iOS Demo & Test
Web push notifications demo on iOS and Android. Get the free starter template with support for iOS Safari PWA notifications.
🌐
MagicBell
magicbell.com › blog › ios-now-supports-web-push-notifications-and-why-you-should-care
iOS Now Supports Web Push Notifications
I wanted to ensure that it included lots of instructions and feedback, and if all goes well it is likely to be the first time you will have ever received a push notification from a piece of software that hasn’t been pre-installed or downloaded from the App Store. The code for this demo is also open-sourced here: https://github.com/magicbell-io/webpush-test.
🌐
WebKit
webkit.org › blog › 13878 › web-push-for-web-apps-on-ios-and-ipados
Web Push for Web Apps on iOS and iPadOS | WebKit
May 2, 2023 - A web app that has been added to the Home Screen can request permission to receive push notifications as long as that request is in response to direct user interaction — such as tapping on a ‘subscribe’ button provided by the web app. iOS or iPadOS will then prompt the user to give the web app permission to send notifications.
🌐
Pwa
pwa.io › articles › web-push-with-ios-safari-16-4-made-easy
Web Push with Mobile Safari (iOS 16.4) made easy - pwa.io
A bit of JavaScript that registers ... for push notifications. On iOS, the important thing here is that the request for permissions happens in an onclick handler and not directly when the page is opened · A backend that stores the endpoints and tokens obtained from the browser. The app must be installed on the homescreen and needs a manifest.json. I used standalone for the display field in the manifest. A backend component to send pushes. For PHP I used the minishlik/web-push ...
Find elsewhere
🌐
WebKit
webkit.org › blog › 16535 › meet-declarative-web-push
Meet Declarative Web Push | WebKit
May 5, 2025 - Something useful needs to happen without JavaScript when a user activates a declarative notification. That’s where the required "navigate" value comes in. It describes a URL that will be navigated to by the browser upon activation. Finally, if the web app supports running in an app-like mode that supports the Badging API, such as Home Screen web apps on iOS, the declarative message can include an updated application badge. In practice, a vast majority of Web Push messages are already JSON.
🌐
Better-messages
better-messages.com › customization › guides › ios web push notifications
IOS Web Push Notifications | Better Messages
Besides that you need to add manifest.json link to your website head part, you can do it with php snippet for example: add_action( 'wp_head', function (){ echo '<link rel="manifest" href="/manifest.json"/>'; } After that website must be added to ios home-screen as web application and web push feature will start to work there. If you want to make it work with ready to use PWA Plugins, you need to find the plugin which will be compatible with OneSignal push notifications integration as with most of PWA solutions the built-in WebPush notifications system of Better Messages will not work due to browser limitations to the number of service workers.
🌐
MagicBell
magicbell.com › blog › how-to-set-up-ios-web-push-notifications
How To Set Up iOS Web Push Notifications
We provide an overview of how to set up iOS web push notifications, including a step-by-step tutorial to help you get started.
🌐
dev/tails
devtails.xyz › @adam › how-to-setup-web-push-notifications-in-ios-safari
Tutorial: How to Send Web Push Notifications in iOS Safari | dev/tails
February 27, 2023 - This basic API allows the client side to subscribe to notifications by POSTing to /save-subscription and then a notification can be triggered by making a GET request to /send-notification. import express from "express"; import webpush from "web-push"; import dotenv from "dotenv"; dotenv.config(); const app = express(); app.use(express.json()); let subscriptionData = null; webpush.setVapidDetails( `mailto:${process.env.VAPID_MAILTO}`, process.env.VAPID_PUBLIC_KEY, process.env.VAPID_PRIVATE_KEY ) app.get('/send-notification', (req, res) => { webpush.sendNotification(subscriptionData, "Hello World") res.sendStatus(200); }) app.post("/save-subscription", async (req, res) => { subscriptionData = req.body; res.sendStatus(200); }); app.use(express.static("./public")); app.listen(8000);
🌐
PushEngage
pushengage.com › home › docs › getting started › setting up web push notifications on ios and ipados
Setting Up Web Push Notifications on iOS and iPadOS - PushEngage
April 16, 2025 - Apple has released iOS and iPadOS 16.4, which supports web push notifications for web apps added to the Home Screen on iPhone and iPad devices. In this guide, we help you set up your website to send notifications to iPhone and iPad users visiting your website.
🌐
Pushowl
docs.pushowl.com › en › articles › 7222014-web-push-notifications-on-ios
Web push notifications on iOS | PushOwl Help Center
Click on the web app icon on the home screen, and a prompt will appear. Tap the ‘subscribe’ button to receive push notifications. Voila! Your visitors are now subscribers :) They are ready to receive push notifications on their iOS devices. Make sure you are using iOS 16.4 and above. ​ · Please ensure that you have not muted notifications on your iOS devices, examples:
🌐
Reddit
reddit.com › r/webdev › finally! safari on ios now supports web push — my journey and key takeaways
r/webdev on Reddit: Finally! Safari on iOS now supports web push — My journey and key takeaways
July 4, 2025 -

Back in 2015–2017, web push notifications (especially on Chrome) were extremely popular and often achieved much higher CTR than emails. Over time, however, adoption declined, and most importantly, Safari on iOS didn’t support them at all — which forced many developers (including me) to abandon push-related projects for iOS users.

At that time, I built a push system using Firebase Cloud Messaging (FCM) for Android, and everything worked fine. But on iOS, you needed an Apple Developer Account ($100/year), plus a pretty complex setup with certificates (APNs), which made it frustrating.

Fast forward to October 2024, I decided to revisit and upgrade my old system. The good news: starting from iOS 16.4, Safari now officially supports web push notifications!

Here are the two main requirements:
✅ Your web app must be added to the home screen (like a PWA).
✅ Devices must run iOS 16.4 or newer.

With this change, my system finally works smoothly across Android and iOS Safari.

🔧 Quick steps to enable push on iOS Safari:

  • Implement JavaScript logic to capture push subscriptions from Safari.

  • Use server-side tools (like the web-push library) to send notifications to subscribed endpoints.

  • Test it on a real iOS device, after adding your web app to the home screen.

Overall, push on iOS Safari is no longer impossible — it just needs a few extra steps. If anyone has questions or runs into issues, feel free to ask. Happy to share more details! 🚀

🌐
OneSignal
documentation.onesignal.com › docs › en › web-push-for-ios
iOS web push setup - OneSignal
Complete guide to enabling web push notifications on iOS and iPadOS devices, including manifest file setup, user onboarding strategies, and implementation best practices for Safari, Chrome, and Edge browsers.
🌐
Firt
firt.dev › ios-15.4b
Push Notifications, WebXR, and better PWA support coming to iOS - firt.dev
New APIs, capabilities, bugs, and challenges for Safari and PWAs running in iOS 15.4 and iPadOS 15.4, including Web Push Notifications, WebXR
Top answer
1 of 6
159

You have only three main options to get push notifications working on iOS for a PWA. In both cases, you must register an App ID on Apple Developer portal, with permission to the appropriate service. For Option 1, your registered App ID must have permission to Apple Wallet. For options 2 and 3, you must have permission to Push Notifications. In both cases, you should record your Bundle ID and Team ID in case you need it later.

  • Option 1 (Easier): Use PassKit to set up a generic Apple Wallet pass, which can broker notifications that are very similar to native ones. Here's some documentation, and here's a working demo of how this can send push notifications to registered devices.

  • Option 2 (Harder): Use Firebase Cloud Messaging or a package like Node-APN to send push notifications the "proper" way, signed with a P12 or P8 key from the Apple Developer Portal. This gets tricky mainly because you need the iOS device identifier, which is only exposed to applications installed natively. I'm afraid I don't have an answer on how to get this device ID from within a PWA, and without it, this method doesn't work.

  • Option 3 (not a PWA): You can use an App ID with a provisioning profile and either a P12 or P8 key, similar to the previous option, but you wrap your application in Apache Cordova, and distribute it (either through the public app store, or using MDM software and via the private Apple Business Manager).

Those are your options. I have exhausted every possible avenue researching this, and I am confident that these will remain your only options through at least the next several months. It's possible we may see further support for Web Push or perhaps just a way to get the device ID from the web in the future, but until that time, this is it. There aren't any other ways to go about this presently.

Source: I architect and develop apps for major brands like Subway, Gartner, Morgan Stanley and PwC (among many others). My research is very recent, and includes direct communication with the head of WebKit at Apple, and also with one of the world's foremost PWA and iOS experts.

2 of 6
39

I just want to let you all know: Apple will support push notifications for web apps! This news was published at the WWDC2022. Apple will release Web Push with Safari 16 on macOS (Ventura) in a few months (2022) and for iOS and iPadOS in 2023.

See: https://webkit.org/blog/12945/meet-web-push/

🌐
iZooto
izooto.com › ios push notifications › ios push notifications on web is now live with ios 16.4
iOS Push Notifications on Web Is Now Live With iOS 16.4
November 8, 2024 - As promised in WWDC in June 2022, Apple has come up with the much awaited support for web push notifications on iOS. Starting iOS 16.4, websites are now able to start sending iOS push notifications, not only on Safari, but also to other browsers such as Chrome and Firefox.