FCM.subscribeTo not working on iOS

[khalsa-school-app]

Describe the bug The app is not subscribing to any topic on iOS devices. There is no issue with Android devices.

To Reproduce Steps to reproduce the behavior:

1. Create a new ionic project (6/7)
2. Add Capacitor 5 (iOS)
3. Complete the Ionic Post Notification setup steps
4. Subscribe to a topic using capacitor-community/fcm

Expected behavior The app should subscribe to the topics on iOS just like Android.

Code

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ActionPerformed, PushNotificationSchema, PushNotifications, Token } from '@capacitor/push-notifications';
import { Preferences } from '@capacitor/preferences';
import { FCM } from '@capacitor-community/fcm';

interface SubscriptionPreferences {
  [key: string]: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {

  subscriptionPreferences: SubscriptionPreferences = {};
  topics = ['Announcements', 'Calendar', 'Upcoming-Events', 'Block-Rotation', 'Clubs', 'Sports', 'Cafeteria', 'Contests', 'University-Advising', 'New-Student-Help', 'Parent-Info', 'Staff-Directory', 'ios'];

  constructor(private router: Router) {}

  ngOnInit() {
    console.log('Initializing HomePage');

    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // Show some error
      }
    });

    Preferences.get({ key: 'firstTimeOpen' }).then(result => {
      const isFirstTimeOpen = result.value;

      if (isFirstTimeOpen === null || isFirstTimeOpen === 'true') {
        this.topics.forEach(topic => {
          FCM.subscribeTo({ topic: topic })
            .then(() => {
              console.log(`Subscribed to topic ${topic}`);
              this.subscriptionPreferences[topic] = true;
              Preferences.set({ key: 'firstTimeOpen', value: 'true' });
            })
            .catch((error) => {
              Preferences.set({ key: 'firstTimeOpen', value: 'false' });
            });
        });

        this.subscriptionPreferences = this.topics.reduce((acc: SubscriptionPreferences, topic: string) => {
          acc[topic] = true;
          return acc;
        }, {});

        Preferences.set({ key: 'subscriptionPreferences', value: JSON.stringify(this.subscriptionPreferences) });
      } 
       Preferences.get({ key: 'subscriptionPreferences' }).then(result => {
         const preferencesValue = result.value;
         this.subscriptionPreferences = preferencesValue ? JSON.parse(preferencesValue) : {};
        });
        console.log(this.subscriptionPreferences)

    });

    PushNotifications.addListener('registration', (token: Token) => {
      console.log('Push registration success, token: ' + token.value);
    });

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

    PushNotifications.addListener(
      'pushNotificationReceived',
      (notification: PushNotificationSchema) => {
        alert('Notification received: ' + notification.title + '\n' + notification.body);
      },
    );

    PushNotifications.addListener(
      'pushNotificationActionPerformed',
      (notification: ActionPerformed) => {
        console.log('Push action performed: ' + JSON.stringify(notification));

        if (notification.notification) {
          const notificationData = notification.notification.data;
          if (notificationData && notificationData.page) {
            this.router.navigateByUrl(notificationData.page);
          }
        }
      },
    );
  }

}

[khalsa-school-app]

@stewones Any help is greatly appreciated.

[nvahalik]

I have recently noted that this is not working for us as well.

Push notifications are coming through properly on iOS with FCM but any call to subscribeTo fails.

[khalsa-school-app]

@nvahalik

I am trying to work with the @capacitor-firebase/messaging library to try and subscribe to a topic. From what I have heard it works better than the FCM plugin. I am just trying to figure out how to use it in conjunction with the @capacitor/push-notifications. If I figure something out I will post it, likewise if you figure something out I would appreciate it if you could also post it.

I do not have much faith in the FCM plugin as I have been trying to fix it for a week, with no luck,

[brobilal]

Same here, the "subscribeTo" does not seem to work. There are also no errors generated. I never get into the FCM.subscribeTo block here below at all:

topicsToUpdate.push(new Promise((resolve, reject) => { FCM.subscribeTo({topic: topicItem}).then( () => { console.log('------------------ we are subscribed!!!'); resolve({subscribed : true, topicItem}); }).catch( (err) => { console.log('there is something wrong with subscribing: ' + err); resolve(null); }); }));

[brobilal]

hi @khalsa-school-app so did you find a solution???

[khalsa-school-app]

@brobilal

Hi,

Sorry for the late response, I have been extremely busy lately.

I found a solution but with a different plugin. I have attached a demo below. I could not get this working with the latest capacitor version for some reason, so I had to use the same versions in the demo.

It took me roughly 4 weeks to solve, so I hope this helps you.

https://github.com/robingenz/ionic-capacitor-firebase-messaging-demo/tree/main

[brobilal]

Hi @khalsa-school-app thanks for showing what worked for you!

I can't understand how or why this core functionality (FCM.subscribeTo) is not working with Capacitor 5, can you please @stewones have a look at it?

I will try and have a look at the solution you suggestion @khalsa-school-app , again thanks for sharing what worked for you!!

[boutzamat]

I recommend using capawesome-team/capacitor-firebase instead of capacitor-community/fcm and capacitor/push-notifications.

capawesome-team/capacitor-firebase not only reduces the amount of packages from 2 to 1, but its so much straight forward and works with topics. It's a breeze and very easy to setup. Not many changes are required.

Thanks to @khalsa-school-app for linking to the demo. I recommend linking to the actual package instead, as i had to find it in the demos package.json file lol.

[boutzamat]

Hi @khalsa-school-app thanks for showing what worked for you!

I can't understand how or why this core functionality (FCM.subscribeTo) is not working with Capacitor 5, can you please @stewones have a look at it?

I will try and have a look at the solution you suggestion @khalsa-school-app , again thanks for sharing what worked for you!!

Check out my reply bro. It will solve all your problems :D