Push Messaging to Android and Web in same project

Hello guys,

I’m developing an app for ios, android and web. I’m just using one project vs code for everyone. In almost everything works. But, I do not know how to implement a push messaging for both web and android together. I was able to make both work on different projects. But when I run into Android it runs the web service work and gives error.

Links I’ve used:

  1. For android- https://angularfirebase.com/lessons/ionic-native-with-firebase-fcm-push-notifications-ios-android/
  2. For web - https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging/

I’m using Ionic 4.
Cordova 7.
Ionic Cordova Firebase for the pushs.

Does anyone have any idea how I can do this?

Hi,

You can detect the platform with :

this.platform.ready().then(() => {
  if (this.platform.is('cordova')) {
    // make your native push service
  } else {
    // fallback to browser push service
  }
});

An other solution is to use environnement parameter to know your platform and import differents modules according to the platform. Then use something like :

// Device module
@NgModule({
    providers: [
        {provide: PushCenter, useClass: PushCenterMobile},
    ],
    exports: [
    ]
})

Thanks for the reply.
But, as I register the service work to use Push Web?

this.platform.ready().then(() => {
  if (this.platform.is('cordova')) {
    // make your native push service
  } else {
    // How do I call the web service work push here?
  }
});

You must have 2 services :

  • 1 PushService for Device
  • 1 PushService for Web
    Register your services in the NgModule. Then import the services in your controller as any injectable services then it’s simple function call
constructor(pushWeb : PushWebService, pushDevice : PushDeviceService, platform : Platform) {
    this.platform.ready().then(() => {
        if (this.platform.is('cordova')) {
            pushDevice.getPushToken();
        } else {
            pushWeb.getPushToken();
        }
    });
}

In the second solution with environment variables you will be able to import the right service by importing a different ngModule accorting to the platform. Then your services will need to have the same prototype.

Yes, I know that.
The question is where do I register this PushWeb? For the research I did only with the service work. And this I can not work on a service. Only with the native ionic-cordova-firebase plugins.
Is there a native plugin for push web that I can register in that location you suggested?