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