Push notifications PWA on iOS
Hi everyone!
I just have a couple of questions since I'm a bit confused regarding the iOS topic.
We have a project built with Vite/React (frontend) and NestJS (backend).
We enabled the PWA for iOS devices and we use Novu with FCM for Push Notifications.
I correctly receive all the push notifications on my macbook but I have issues on iOS.
Is it possible to receive push notifications from Safari browser on iOS?
Is it possible to receive push notifications from PWA on iOS?
About Safari mobile browser I tried to ask for notifications permission but I get that the browser does not support notifications (?) and does not let me ask for permission to the user.
I was looking at some guides about APNs but my understanding was that the apple key is needed only when sending notifications to native apps, but as of today I'm thinking maybe we need it also if the app is a PWA.
Thanks a lot,
Gaia
9 Replies
Hey Gaia
> I correctly receive all the push notifications on my macbook but I have issues on iOS.
Can you share the issue you are facing on ios?
> I correctly receive all the push notifications on my macbook but I have issues on iOS.
Can you share the issue you are facing on ios?
Hello @Pawan Jain , I work with Gaia on the same project.
Some context:
we're using Firebase as push provider, we created a project with a web app inside.
on our FE we handle both foreground and background notifications; we can successfully see and consume both of them on almost every OS and browser, PWA included, except for iOS.
Here's the issue:
1) We trigger a test push notification on Novu DEVELOP environment;
2) We see from your dashboard that Firebase successfully sent the notification to all devices, iOS one included;
3) Notifications are delivered to all devices except for iOS one, on which we just see nothing happening (on the FE app we logged each notification handling step but neither those logs are printed in the console)
Do we need an APNs key override to make it work? On the firebase console we see that config only for iOS native apps, not web apps (included PWA), so we are not sure if this is the problem or something else
@Pawan Jain Hi Pawan, any updates?
Hey gaia
Apologies for missing this.
I will try to reproduce this issue. We have not tested novu push with PWA yet.
Apologies for missing this.
I will try to reproduce this issue. We have not tested novu push with PWA yet.
Hello @Pawan Jain, any update? Thx
@Edoardo @Gaia
Couple of point to check to receive the push notification on PWA on ios devices
a) On IOS, an explicit user action must trigger the notification permission request (like a button click). Make sure you are requesting permission in response to a user action
b) Notifications can only be requested when running as a PWA, make sure you added the app to the home screen first using share option
c) Notifications are only supported on IOS 16.5 and above. Make sure you are running on a supported version of IOS
Can you check if you receive the push notification successfully using this tool?
https://push.foo/
@Edoardo @Gaia
Did you get chance to check on above message. Happy to debug if everything is done in above message and still PWA is not getting push notification
Hi @Pawan Jain , thanks! all the 3 requirements you pointed out are followed in our application: I have iOS 18, I'm using the PWA installed on my iphone and we have a button to display the popup and request the user notification permissions.
I tried with the tool you linked and it works.
Now I'm having an issue with the generation of the device token so I think maybe it's coming from firebase.
I'll investigate today and let you know if we can fix it.
Sure Gaia, keep us updated 🙂
Hi @Pawan Jain !
The device token generation is fixed now, but still having problems on iOS.
- I add my PWA on my home screen on iOS 18>
- I press the button "enable notifications" and the pop up shows up correctly
- I press "ALLOW" on the pop up
- In console I can see the logs of firebase being correctly initialised and device token generated
- I log in my application with my email
- The application takes my email and my device token and makes the api call to update the credentials on Novu successfully (I see in subscribers tab in Novu's dashboard that the user has been updated recently)
- Using the same subscriberId I trigger a test-push workflow on Novu's dashboard and see no errors (transactionId: "57d9e46b-f462-43bd-8a5c-6d882a224460")
- The event is marked as COMPLETED and says that the message was successfully sent to fcm
- I still receive NOTHING on my iPhone (either background or foreground notifications)
- I also see nothing being logged in console except for this I'll paste below, even If I added logs everywhere in the service worker when receiving either background notification (listener on 'push' event) or foreground notifications (onMessage listener).
PS: I also enabled all notification for my PWA in iOS settings