Capacitor: Bundled PWA with FCM notifications

[sbozzie]

Hi gang,

We have an Angular 6 / Firebase 5.4.2 / AngularFire PWA that is heavily using Firebase for auth, and FCM for notifications that we are attempting to bundle into an application suitable for listing in app stores.

The PWA is functioning well, and is receiving FCM notifications via the firebase-messaging-SW.js service worker.

We've attempted using both Cordova, and Capacitor to bundle this PWA into an APK and IPA.
We've struggled to get notifications working, however. Debugging the issues have shown us that although the service workers register, as we request permissions, we get the errors:

ERROR FirebaseError: Messaging: This browser doesn't support the API's required to use the firebase SDK. (messaging/unsupported-browser).

referenceError:Notification is not defined. firebase messaging request permission

Any guidance on this would be much appreciated: if you know of code samples that show packaging a PWA while using FCM notifications that we can work from, that would be ideal, or if you know of approaches that have proven successful for other teams, then a point towards those toolsets would also be of use!

[jcesarmobile]

If you package the PWA with Cordova or Capacitor you have to use the native push, not the web push as they become native apps.

[jcesarmobile]

I created this sample project that uses the PushNotifications plugin for iOS and Android
https://github.com/jcesarmobile/ionic-angular-capacitor-push-example

As I mentioned in my previous message, when the app is bundled with Capacitor it's no longer a PWA, but a "native" app, and web push won't work there.

[TayKara]

Is there a way to make Firebase working on native and pwa with the same code ? (by using different plugins for example)

[assemmarwan]

@tayfun14 have you found a way for using both?