Capacitor - Not receiving push notifications in Ionic + Angular app

Question

I've started moving on capacitor. After reading https://capacitorjs.com/docs/cordova/known-incompatible-plugins I found that capacitor doesn't support some cordova plugins.

I'm using cordova-plugin-fcm-with-dependecy-updated for android and cordova-plugin-fcm for iOS in my app for push notifications but capacitor doesn’t support these plugins so I used capacitor native approach guided in https://capacitorjs.com/docs/apis/push-notifications#addlistener.

The native approach is not throwing any error and I am able to get registered token as well but I am not receiving push notifications on registered device.

I also tried https://www.npmjs.com/package/capacitor-fcm but fcm.getToken() is returning null.

capacitor.config.json

"plugins": {
         "PushNotifications": {
           "presentationOptions": [
             "badge",
             "sound",
             "alert"
           ]
         }
       }

app.ts

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private fcmService: FcmService
  ) {
    this.initializeApp();
  }

  ngOnInit() {}

  initializeApp() {
    this.platform.ready().then(() => {  
      setTimeout(() => {
        this.splashScreen.hide();
      }, 300);    

      this.fcmService.initPush();

    });
  }
}

fcm.service.ts

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

import { Router } from '@angular/router';

const { PushNotifications, Modals } = Plugins;

import { FCM } from '@capacitor-community/fcm';
const fcm = new FCM();

const { FCMPlugin } = Plugins;

@Injectable({
    providedIn: 'root'
})
export class FcmService {
    
    constructor(
        private router: Router) { }

    initPush() {
        alert('Capacitor platform' + Capacitor.platform);
        if (Capacitor.platform !== 'web') {
            this.registerPush();
        }
    }

    private registerPush() {

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

        PushNotifications.addListener(
            'registration',
            (token: PushNotificationToken) => {
                alert('APN token: ' + JSON.stringify(token));
                fcm.getToken().then((r) => {
                    alert(`FCM Token: ${r.token}`); //---- showing null.
                }).catch((err) => {
                    alert(`FCM Token ERROR: ${JSON.stringify(err)}`);
                });

            }
        );

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

        PushNotifications.addListener(
            'pushNotificationReceived',
            async (notification: PushNotification) => {                    
                Modals.alert({
                    title: notification.title,
                    message: notification.body
                })
            }
        );

        PushNotifications.addListener(
            'pushNotificationActionPerformed',
            async (notification: PushNotificationActionPerformed) => {
                alert('Action performed: ' + JSON.stringify(notification.notification));
            }
        );
    }
}

Is there anything I am missing or I need to add extra configurations to receive push notifications ?

Capacitor - Not receiving push notifications in Ionic + Angular app

Answers (1)

Related Questions