[iOS] Support Push Notifications via Firebase or other service

[JudahGabriel]

The iOS project we're using supports Push Notifications via Firebase. Currently, the code is commented out, and PWABuilder doesn't give any UI for it.

We could uncomment the push notification code and add UI in PWABuilder to allow you to specify your Firebase push notification details.

If Push Notifications are important to you, please 👍 this issue.

[kriti-jain-unbiased-co-uk]

Any workaround by which I can integrate One Signal messaging service to send some push notifications to the PWA builder generated iOS app?

[sivertheisholt]

What is the chance of this working when 2024 arrives? I have a project that would like PWA app to be available in app store and support push notifications.

[khmyznikov]

@raghulkrishna @kriti-jain-unbiased-co-uk @sivertheisholt nothing changed. Web Push API available only for installed Chrome/Safari PWA. Not a Apple Store distributed. Workaround is the same: https://github.com/khmyznikov/ios-pwa-wrap you can potentially swap Firebase to One Signal.

[joelwillis]

Just published my PWA app to the app store. Everything is great other than the push notification issue. (Push notifications work with the PWA added to home screen from Safari, but not on the app store version.) Any line of sight for this to be resolved? I'd rather not implement a workaround, but the lack of push notifications is a showstopper.

[mlstubblefield]

Any updates on this?

[sans1994]

@khmyznikov @SuperPat45 @tntjstumadre I have an iOS app built using PWABuilder. And I have my server that works with notifications (not third-party services like One Signal or Firebase).

Do you know if my app can receive notifications using PWABuilder considering these conditions?

Is it possible that additional settings are needed for certificates or in Xсode?

Everything works great for now, but only if the app is installed from the browser and not from the app store.

There is also a problem with the application not displaying a popup request to confirm the possibility of sending notifications to the user (only in-app, in pwa installed from the browser everything is OK). Is this problem also due to PWABuilder or is there still something I need to configure?

[c-schicho]

since there has already past quite some time since the last comments. are there any updates on this? is there now a better solution than the workaround proposed above?

[jarofbilly]

@sans1994 WebPush works when using the "add to home screen" from Safari but is currently unsupported by Apple in WKWebView which is what PWABuilder uses. Only alternative I have found is to use firebase.

[nbignu]

I am using firebase with the code that PWABuilder includes. But the fcm token is never printed in console. I am getting the following warning

@uiapplicationmain [security] this method should not be called on the main thread as it may lead to ui unresponsiveness.

I cannot tell if the token is not printing in console due to this warning, but the app is running well all in all. The only issue is that the token is not printing, although the firebase seems to be set up OK. As it shows the notification banner when I drag the following file with .apns extension to the simulator:

{ "Simulator Target Bundle": "BUNDLE ID", "aps": { "alert" : { "title" : "Hi there", "body" : "Test!" }, "sound": "default", "badge": 1 } }

Did anybody encounter this issue or can shed some light on this? I am looking forward to printing the fcm token and then use the local storage method with evaluatejs to send it to the backend on the client side and not with swift.

[khmyznikov]

https://github.com/khmyznikov/ios-pwa-wrap/issues/2#issuecomment-1547624335

[sabres207]

After reading this thread I'm still a bit confused. Is it possible to send push notification to pwabuilder apps installed via app store? And if so, what are my options? firebase, oneSignal, in house implementation?

[sabres207]

Just published my PWA app to the app store. Everything is great other than the push notification issue. (Push notifications work with the PWA added to home screen from Safari, but not on the app store version.) Any line of sight for this to be resolved? I'd rather not implement a workaround, but the lack of push notifications is a showstopper.

did you find a workaround / any solution for that?

[johnfilo-kmart]

I had success using this pwa wrapper instead of pwabuilder and using Firebase, using the javascript documented under JS Features in the README of that repo https://github.com/khmyznikov/ios-pwa-wrap

[JohnHHunter]

Looking for an update on this issue.

The docs have a section on Push Notifications. Is this issue still open? Are people able to send Push notifications to a wrapped PWA on iOS devices?

[c-schicho]

I recently implemented push notifications in ios apps built with pwa builder. For one project I used firebase and pushy for the other one. it's possible to send push notifications via apns to ios devices. nonetheless, you'll need to adapt the swift code based on what service you are going to use. definitely check out the comments in AppDelegate.swift.

you can then use events to transfer the information you need between the ios app and the web application. for this, you can check out this repo https://github.com/khmyznikov/ios-pwa-wrap as an example . you can find all available events (or add new) in WebView.swift. In ViewController.swift is the handler of these events and the actual implementations of the individual functions are mainly in PushNotifications.swift.

[bnijenhuis]

I recently implemented push notifications in ios apps built with pwa builder. For one project I used firebase and pushy for the other one. it's possible to send push notifications via apns to ios devices. nonetheless, you'll need to adapt the swift code based on what service you are going to use. definitely check out the comments in AppDelegate.swift.

you can then use events to transfer the information you need between the ios app and the web application. for this, you can check out this repo https://github.com/khmyznikov/ios-pwa-wrap as an example . you can find all available events (or add new) in WebView.swift. In ViewController.swift is the handler of these events and the actual implementations of the individual functions are mainly in PushNotifications.swift.

@c-schicho Do you have any documentation on how you managed to do this? It sounds like the best solution for now, because there's not much activity on this issue. I'm not familiar with editing .swift-files, so if you could document what files should be changed and what the code should be, that would be VERY helpful.

[micheal-ojemoron-thurgood]

@c-schicho can you help with an example code, I am stuck with errors on Firebase, unsupported device. I got the webkit implementation working

[TheoMaraval]

Are there any updates and are some people able to send Push notifications to a wrapped PWA (e.g. wrapped with PWA builder) on iOS devices?

[maiconcarraro]

@TheoMaraval I got my app working, I followed these steps https://docs.pwabuilder.com/#/builder/app-store?id=push-notifications the only thing that I had to modify was the For code on JS side, take a look at this example component step to make it work w/ React. Everything else I followed strictly.

[TheoMaraval]

@TheoMaraval I got my app working, I followed these steps https://docs.pwabuilder.com/#/builder/app-store?id=push-notifications the only thing that I had to modify was the For code on JS side, take a look at this example component step to make it work w/ React. Everything else I followed strictly.

@maiconcarraro Hi, thanks for your answer 🙏, but can you please send your example component? I can’t access it in your answer!

[maiconcarraro]

@TheoMaraval I got my app working, I followed these steps https://docs.pwabuilder.com/#/builder/app-store?id=push-notifications the only thing that I had to modify was the For code on JS side, take a look at this example component step to make it work w/ React. Everything else I followed strictly.

@maiconcarraro Hi, thanks for your answer 🙏, but can you please send your example component? I can’t access it in your answer!

the one from the example is https://github.com/khmyznikov/ios-pwa-shell/blob/main/src/components/push.ts or do you need the react one? the messagehandlers are exactly the same, only difference is using w/ useEffect+useCallback

[TheoMaraval]

@TheoMaraval I got my app working, I followed these steps https://docs.pwabuilder.com/#/builder/app-store?id=push-notifications the only thing that I had to modify was the For code on JS side, take a look at this example component step to make it work w/ React. Everything else I followed strictly.

@maiconcarraro Hi, thanks for your answer 🙏, but can you please send your example component? I can’t access it in your answer!

the one from the example is https://github.com/khmyznikov/ios-pwa-shell/blob/main/src/components/push.ts or do you need the react one? the messagehandlers are exactly the same, only difference is using w/ useEffect+useCallback

If you have the react one it would be perfect, thanks a lot for your help 🙏

[maiconcarraro]

@TheoMaraval I created a gist with the 2 components that I have, it handles both web push (that covers android shell) and a second component dedicated for iOS shell https://gist.github.com/maiconcarraro/0845af1acc7490fb57e4c119815f50fc

[FiFolker]

Hello, I am developing a PWA and I plan to turn it into an application for the stores. I'd like to know if the pwaBuilder project is still active and if this functionality will ever be available. Thank you and have a nice day.

[maiconcarraro]

@FiFolker you can follow https://docs.pwabuilder.com/#/builder/app-store?id=push-notifications the iOS package is still experimental, so probably that's why this issue is still open, I did the implemention for my app following the docs and everything worked fine 👍

[FiFolker]

@maiconcarraro Ok thanks, this part of the doc isn't updated 'cause it says than we can't do push notifications on PWA https://docs.pwabuilder.com/#/builder/faq?id=can-i-use-push-notifications I also saw somes peoples saying than IOS was rejecting pwa on apple store even with builder that is true or not ?

[maiconcarraro]

@FiFolker got it, apps are being approved, you can even see some community showcases in discord, the app will be rejected if they aren't following Apple's requirements, for example if you only have google sign in, they will require you to also implement apple sign in. you need to be clear on cookies policy as well, just usual app review process.

@khmyznikov is it okay to send a PR changing the FAQ?

[graha-10xers]

@TheoMaraval I created a gist with the 2 components that I have, it handles both web push (that covers android shell) and a second component dedicated for iOS shell https://gist.github.com/maiconcarraro/0845af1acc7490fb57e4c119815f50fc

Thank you for the gist! @maiconcarraro BTW I have questions about push notification implementation on Android and iOS

1. Do we need to make any changes to the service worker as well, or are the SubscribeButton component and the SubscribeButtonIOS component enough?
2. In the gist, the event listener code is only applied to the SubscribeButtonIOS component. What about the event listener for Android?
3. Is it possible to handle the onClick event for notifications? If so, how can we implement it for both Android and iOS?

Thanks!

[maiconcarraro]

@graha-10xers

1. Do we need to make any changes to the service worker as well, or are the SubscribeButton component and the SubscribeButtonIOS component enough?

You need to have a setup for service worker, just follow any tutorial for your stack or check firebase documentation is enough, this only apply to Android since it uses the web push, https://firebase.google.com/docs/cloud-messaging/js/client

2. In the gist, the event listener code is only applied to the SubscribeButtonIOS component. What about the event listener for Android?

You only need event listener for the bridge on iOS, for web/android you will use the standard Web Push API:

   const permission = await Notification.requestPermission();
    if (permission === "granted") {
      const currentToken = await getToken(messaging, {
        ....

Notification is web standard and getToken is from Firebase

3. Is it possible to handle the onClick event for notifications? If so, how can we implement it for both Android and iOS?

For Android you should use the notificationclick in service worker, and for iOS you will need to listen to the push-notification event listener: https://github.com/khmyznikov/ios-pwa-wrap/blob/623824aa3e46e6b47766769c646704b8af4cb300/pwa-shell/PushNotifications.swift#L171-L180 overall for android that is using web push is very straightforward, for iOS you will need to explore more the wrap project to check the lifecycle for swift <> wkwebview <> dispatches

[vitalii-work]

Hello! @sans1994 mentioned that push notifications work only if his/her PWA is installed from the browser and not from the App store. What about push notifications in PWAs installed from Google Play?

We also have a PWA with our own Push Notification service and push notifications work when our PWA is installed from a few browsers on Android. I'm curious whether they will continue to work after we package it using PWABuilder and publish to Google Play. Does anyone know?

An update (answering my own question):

Yes, they will (I've personally verified this moment using a test release from Google Play). However, they don't work when Samsung Internet is set as the default browser. There are some known problems with it, read here: https://github.com/pwa-builder/PWABuilder/issues/4777#issuecomment-2256896291

According to this page, Samsung Internet has only a basic support for TWA.

[jgmdigital]

Hi all. We have some minor success with FCM on Android in PWA installed via browser, but are struggling with PWA builder apk file installed on a phone, and no success at all on ios. Does anybody have any guides / tutorials they would recommend to get push notifications working via PWA builder?

[johnfilo-kmart]

I've had limited success with PWA Builder for iOS only with Firebase and push. Have you considered taking a different approach with Flutter using something like https://github.com/bettysteger/flutter_pwa_wrapper

[csrui]

👋🏼 not sure if I should open a new issue for this. Please let me know.

I've been able to setup my backend, the ios app generated with pwa builder in xcode and the device simulator is receiving the notifications correctly (using firebase). What I haven't been able to figure out or find information about online is how to do something when clicking the notification. I've looked at the xcode source code but I don't know swift, I develop in php and js. The answer might be obvious but I just cant find it.

Can anyone point me in the right direction? Thank you so much.