CODEWITHSUNDEEP
cordovaionic-frameworkfirebase-cloud-messaging
John Tiggernaught
John Tiggernaught

Reputation: 788

Ionic 4 FCM onNotification not being called

I'm using cordova-plugin-fcm-with-dependecy-updated to receive push notifications, but the this.fcm.onNotification observable isn't being executed. I can see in the Xcode console that the message is being received, and stepping through the code I can see -(void) notifyOfMessage:(NSData *)payload is being called from within FCMPlugin.m but I can't identify why this.fcm.onNotification isn't being called.

I can see FCMPlugin.js: is created and FCMPlugin Ready OK in the console, and a few lines lower I can see a console.log I added to confirm that this.platform.ready is being called (which is where I'm subscribing to fcm.onNotification from within app.component.ts)

It's worth noting that when the app is closed or paused I receive the notifications, it's just when the app is in the foreground I can't capture when a notification is received to alert the user, and when tapping on the notification I can't read wasTapped property to redirect the user to a specific page (because onNotification isn't being triggered).

Anyone have any idea as to the cause of the problem?

I'm using:

@Ionic/angular: ^4.11.4
cordova-android: ^8.1.0
cordova-ios: ^5.0.1
cordova-plugin-fcm-with-dependecy-updated: ^4.1.0
FCM_CORE_VERSION: 16.0.9
FCM_VERSION: 18.0.0,
GRADLE_TOOLS_VERSION: 3.5.0,
GOOGLE_SERVICES_VERSION: 4.2.0

Upvotes: 0

Views: 1879

Answers (1)

John Tiggernaught
John Tiggernaught

Reputation: 788

I have figured out dreadful workaround that is satisfactory for my current needs, but doesn't entirely solve the issue at hand.

For iOS, rather than putting the following code in the app.component.ts constructor:

this.platform.ready().then(() => {
  this.fcm.onNotification().subscribe(data => { 
    // Do stuff here
  });
});

I put the following code within this.initializeApp():

async this.initializeApp() {

  try { 

    let isReady = await this.platform.ready();

    if (isReady) {

      if (this.platform.is('ios') === true) {

        this.fcm.onNotification().subscribe(data => { 
          // Do stuff
        });

      }

    }

  } catch (err) {

    // Deal with error

  }

  // Do other app init stuff

}

It makes no sense to me why await would work rather than this.platform.ready().then(), but for whatever reason the above works for iOS.

To get onNotification to work for Android, I needed to put the following in the app.component.ts constructor:

if (this.platform.is('android') === true) {

  this.platform.ready().then(() => {

    setTimeout(() => {

      this.fcm.onNotification().subscribe(data => { 
        // Do stuff here
      });

    }, 100);

  });

}

Again, I have not idea why this is the case. But after spending days on this issue this is what I've come up with as a passable solution.

There is an issue with the above Android code though. The onNotification observable will only fire when the app is in the foreground. When it's closed, or paused, and you receive a notification and tap on it, the onNotification observable won't be fired. :(

Upvotes: 1

Related Questions