Ionic 5 Firebase notification - this.fcm.onNotification().subscribe() never fired

Question

I'm trying to add notification with firebase in my ionic application (ionic 5). I follow this tutorial : https://www.positronx.io/ionic-firebase-fcm-push-notification-tutorial-with-example/

I recieve the token and when i send a notification from firebase console, the notification is displayed on the phone (emulator) but nothing is displayed in the console to handle the notification click...

I add FCM into provides in app.modules.ts and i have added the following code in the app.component.ts

import { FCM } from "@ionic-native/fcm/ngx";

...
constructor(
...
    private fcm: FCM
  ) {}

 initializeApp() {
    this.platform.ready().then(() => {

      this.statusBar.styleDefault();

      this.splashScreen.hide();
    this.fcm.getToken().then(token => {
      console.log(token);
    });
    this.fcm.onTokenRefresh().subscribe(token => {
      console.log(token);
    });

    this.fcm.onNotification().subscribe(data => {
      console.log(data);
      if (data.wasTapped) {
        console.log('Received in background');
      } else {
        console.log('Received in foreground');
      }
    });

     if (token === null) {
      this.msgService.presentToast(
        "Impossible de configurer la reception des notifications"
      );
    }
    // Observer.hasTokenFCM.next(token);

    if (this.platform.is("ios") || this.platform.is("android")) {
      // this.saveToken(token);
    }
  });

And a have installed the following plugins: ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated npm install @ionic-native/fcm

cordova plugin list: cordova-plugin-fcm-with-dependecy-updated 4.4.0 "Cordova FCM Push Plugin"

In my package.json:

dependencies: "@ionic-native/fcm": "^5.22.0", "cordova-plugin-fcm-with-dependecy-updated": "^4.1.1",

"cordova" -> "plugins": "cordova-plugin-fcm-with-dependecy-updated": { "FCM_CORE_VERSION": "16.0.8", "FCM_VERSION": "18.0.0", "GRADLE_TOOLS_VERSION": "2.3.+", "GOOGLE_SERVICES_VERSION": "3.0.0" },

Thanks a lot if you found why the "this.fcm.onNotification.subscribe" is never fired...

Anastasiia Nedbailo Anastasiia Nedbailo · Accepted Answer · 2020-11-18T21:15:54

To fix this, use cordova-plugin-fcm-with-dependecy-updated plugin instead of @ionic-native/fcm/ngx, they are conflicting with each other. If onNotification method is not fired and you can't get the payload, try to use getInitialPushPayload

...
const pushPayload = await this.fcm.getInitialPushPayload();

if (pushPayload) {
  this.processPayload(pushPayload);
}

this.fcm.onNotification().subscribe(
  (payload: PushNotification) => this.processPayload(payload)
);
...

Ionic 5 Firebase notification - this.fcm.onNotification().subscribe() never fired

2 Answers