FCM, FCMPlugin are always undefined

[remluben]

FCM, FCMPlugin are always undefined
Our Ionic setup with Capacitor using capacitor-community/fcm to listen for push notifications for defined topics (currently only all) does not work as expected. Calling fcm.subscribeTo() as well as FCMPlugin.subscribeTo() result in an error when running in an Android device:

Cannot read property 'subscribeTo' of undefined

My first thoughts were, that this is an Angular / Ionic specific issue, but after trying a couple of different solutions, I concluded, that there is another problem in our setup:

• using the FCM class via Angulat Provider did not work
• creating an fcm variable with const fcm = new FCM() did not work
• using FCMPlugin.subscribeTo() directly did not work
• wrapping the function call in an additional this.application.ready().then() callback did not work too

To Reproduce

1. Setup the tabs ionic project with capacitor support
2. Add the Push Notifications features as defined below

Package and software versions

// packages.json
"@capacitor-community/fcm": "^1.0.8",
"@capacitor/android": "^2.4.4",
"@capacitor/core": "2.4.4",

// cli
ionic --version
6.12.3

npm --version
6.14.5

npx cap --version
2.4.4

Notes

• the build works like charm, the problem seems to occur at runtime
• Sending messages directly via Firebase console works fine, but in contrast to our custom messaging serverside applicatin it does not send to a specific topic

Code sample

import { Component, OnInit } from '@angular/core';

import {
  Plugins,
  PushNotification,
  PushNotificationToken,
  PushNotificationActionPerformed,
} from '@capacitor/core';

const { PushNotifications } = Plugins;
import { Platform } from '@ionic/angular';
import { FCM } from '@capacitor-community/fcm';
const fcm = new FCM();

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {

  constructor(private platform: Platform) {

  }

  ngOnInit() {
    // On success, we should be able to receive notifications
    PushNotifications.addListener('registration',
      (token: PushNotificationToken) => {
        alert('Push registration success, token: ' + token.value);

        alert("Trying to subscribe to topic 'all'...");

       // the error is thrown here: fcm.subscribeTo() is not available, fcm is undefined

        fcm.subscribeTo({ topic: 'all' })
          .then((r) => alert("subscribed to topic 'all'. Should receive notifications to this topic from now on."))
          .catch((err) => console.log('Error on PushNotifications.fcm.subscribeTo():' + JSON.stringify(err)));
      }
    );

    // Some issue with our setup and push will not work
    PushNotifications.addListener('registrationError',
      (error: any) => {
        alert('Error on registration: ' + JSON.stringify(error));
      }
    );

    // Show us the notification payload if the app is open on our device
    PushNotifications.addListener('pushNotificationReceived',
      (notification: PushNotification) => {
        alert('Push received: ' + JSON.stringify(notification));
      }
    );

    // Method called when tapping on a notification
    PushNotifications.addListener('pushNotificationActionPerformed',
      (notification: PushNotificationActionPerformed) => {
        alert('Push action performed: ' + JSON.stringify(notification));
      }
    );

    // Request permission to use push notifications
    // iOS will prompt user and return if they granted permission or not
    // Android will just grant without prompting
    PushNotifications.requestPermission().then( result => {
      if (result.granted) {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register().then((_) => {
          console.log("Registration success (callback).");
        })
        .catch((err) => alert('Error on PushNotifications.register():' + JSON.stringify(err)));;
      } else {
        // Show some error
      }
    });
  }
}

[stewones]

Did you run npx cap sync after npm install?

[remluben]

Did you run npx cap sync after npm install?

Hello, thank you for your feedback. Yes i did run the sync. Other plugins @ionic-native/contacts work perfectly okay on the device.

Note, that the native Capacitor PushNotifications also work correctly. Unfortunately I did not find an option to register for a specific topic with PushNotifications, that's why I gave the community plugin a try.

Kind regards,
Benjamin

[adrenaline15]

@remluben

I think the problem is that you forgot to add this plugin to your MainActivity.java.

Since the other plugin you are referring to is a cordova-plugin this step isn't necessary there.

I looked throught the readme of this plugin and i did not find this step there so this could/should be probably stated there...

As you can see in the example-integration it get's added to the MainActivity

You can read more about this in the capacitor-docs.

br

[remluben]

@remluben

I think the problem is that you forgot to add this plugin to your MainActivity.java.

Since the other plugin you are referring to is a cordova-plugin this step isn't necessary there.

I looked throught the readme of this plugin and i did not find this step there so this could/should be probably stated there...

As you can see in the example-integration it get's added to the MainActivity

You can read more about this in the capacitor-docs.

br

Hi @adrenaline15 ,

that's the missing link. I did not know about these extra steps to take.

Anyway, my issues are solved.

Thanks a lot.

Kind regards,
Benjamin