This may not necessarily work in your situation, but I had the exact same issue with a PWA for Safari and I solved it by just using long polling. It will allow you to get around all of the limitations with Safari and I was able to redirect and load sections within our SPA.
async function subscribe() {
let response = await fetch("/subscribe");
if (response.status == 502) {
// Status 502 is a connection timeout error,
// may happen when the connection was pending for too long,
// and the remote server or a proxy closed it
// let's reconnect
await subscribe();
} else if (response.status != 200) {
// An error - let's show it
showMessage(response.statusText);
// Reconnect in one second
await new Promise(resolve => setTimeout(resolve, 1000));
await subscribe();
} else {
// Get and show the message
let message = await response.text();
showMessage(message);
// Call subscribe() again to get the next message
await subscribe();
}
}
subscribe();
https://javascript.info/long-polling
Answer from Munsterlander on Stack OverflowVideos
This may not necessarily work in your situation, but I had the exact same issue with a PWA for Safari and I solved it by just using long polling. It will allow you to get around all of the limitations with Safari and I was able to redirect and load sections within our SPA.
async function subscribe() {
let response = await fetch("/subscribe");
if (response.status == 502) {
// Status 502 is a connection timeout error,
// may happen when the connection was pending for too long,
// and the remote server or a proxy closed it
// let's reconnect
await subscribe();
} else if (response.status != 200) {
// An error - let's show it
showMessage(response.statusText);
// Reconnect in one second
await new Promise(resolve => setTimeout(resolve, 1000));
await subscribe();
} else {
// Get and show the message
let message = await response.text();
showMessage(message);
// Call subscribe() again to get the next message
await subscribe();
}
}
subscribe();
https://javascript.info/long-polling
Web Push is now supported in iOS Safari for PWA's 'installed' to the Home Screen. Please see the following blog post:
https://webkit.org/blog/13878/web-push-for-web-apps-on-ios-and-ipados/
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.
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/
A good portion of my PWA users use Safari on iPhone, but I can't figure how to make Push Notifications work os IOS Safari, they work perfectly on chrome for android and windows. But nothing I've tried seems to works on IOS Safari, on apple.developer docs it just say you should use the push notification API and it should work, it didn't, tried following some tutorials, nothing worked, tried using Firebase Messaging Cloud, also didn't work. I know probably I'm doing something wrong, but it's very hard to debug on an iPhone. Even demos like https://webpushtest.com/ or https://progressier.com/pwa-capabilities/push-notifications do not work properly. Do anyone have an example or demo that really works for IOS Safari, for me to look and see what I'm doing wrong?
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-pushlibrary) 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! 🚀