@capacitor/push-notifications and FCM generate different tokens, crashes android

Ionic 5 app with Capacitor push notification and FCM plugins.

import { FCM } from '@capacitor-community/fcm';

import {
  ActionPerformed,
  PushNotificationSchema,
  PushNotifications,
  Token,
} from '@capacitor/push-notifications';

Why do they generate different tokens??

For Capacitor/PushNotifications, the following generates a token

PushNotifications.addListener('registration',
        async (token: Token) => {
          console.log('token: ' + token.value);
        }
      ).catch(e=>{alert('reqPerm'+e)});

While for FCM, the following generates a different token

FCM.getToken()
      .then(async (r) => {
         console.log(`token saved ${r.token}`)
        })
      .catch((err) => console.warn('error saving token', err));

The FCM token works on iOS (iPhone receives notifications), but registering it on Android, it says something about invalid token registered. So I had to use the token from PushNotifications.addListener for Android, but when it receives a notification, the app crashes.

I made sure that the google-services.json file is in the android/apps folder.

What gives?? Any suggestions?

Use this instead:

This works both for ios and android.

Thanks, I tried it but still crashed when I received a notification.

I test by sending a test message from Firebase’s dashboard (Engage->Messaging->New campaign->Notifications).

Here’s my complete app.component.ts code for reference:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@capacitor/splash-screen';
import { StatusBar, Style } from '@capacitor/status-bar';
import { StorageService } from '@services/storage.service';
import { FCM } from '@capacitor-community/fcm';
import { Device } from '@capacitor/device';

import {
  ActionPerformed,
  PushNotificationSchema,
  PushNotifications,
  Token,
} from '@capacitor/push-notifications';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  pushNotificationToken: any; // I save the token to database because i need it in my backend code.

  constructor(    private platform: Platform, private storage: StorageService  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(async () => {
      await SplashScreen.hide();
      Device.getInfo().then(res => {
        if (res.platform !== 'web') {
          this.registerPush();
        }
      });
    
    });
  }

  // solution
  private registerPush() {
    PushNotifications.requestPermissions().then((permission) => {
      if (permission.receive) {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // No permission for push granted
      }
    });

    PushNotifications.addListener(
      'registration',
      (token: Token) => {
        console.log('My token: ' + JSON.stringify(token));
        this.pushNotificationToken = JSON.stringify(token.value);
      }
    );

    PushNotifications.addListener('registrationError', (error: any) => {
      console.log('Error: ' + JSON.stringify(error));
    });

    PushNotifications.addListener(
      'pushNotificationReceived',
      async (notification: PushNotificationSchema) => {
        console.log(notification);
         alert(notification.body)
      }
    );
    PushNotifications.addListener(
      'pushNotificationActionPerformed',
      async (notification: ActionPerformed) => {
        const data = notification.notification.data;
        console.log('Action performed: ' + JSON.stringify(notification.notification));
      }
    );
  }
}

Thanks.

Have you tried to replace all your code with my example? Have you put the json generated by firebase inside android folder? In your example i still ser the fcm import