How to receive push notification data from FCM when app is killed/closed on ionic 4/5

Hello, I have been able to solve the issue of receiving push notifications in ionic when app is closed/killed after struggling with it for days. It seems there are still no clear answers on the issue. Before following the steps below, ensure you have set up FCM plugin and are able to receive notifications when your app is opened.

The main issue seems to be that the getInitialPushPayload() method returns undefined. This is because you are probably calling it in your FCM.onNotification() event callback and that event will not fire when your app is killed because it is pretty impossible to do so :weary: . The code usually looks like this

FCM.onNotification().subscribe(data => {
      if (data.wasTapped) {
         // handle data here
        console.log("received in background");
        FCM.getInitialPushPayload().then( data => {
              // or handle data here
              console.log(data);
              console.log("received in background")
        }, error=> console.log(error))
      } else {
        console.log("received in foreground")
      };
    });

The above code only works when app is opened and is in foreground/background. But fails to work when app is killed/closed.

FIrst Step
Add this property “click_action”: “FCM_PLUGIN_ACTIVITY” and the below object

"data": {
  "title": "title",
 "body": "body"
}

to notification object. Note that the above data json object is different from the default and standard “title” and “body” fields but should ideally contain the same information for consistency.

Second step
Retrieve the data we just defined using the getInitialPushPayload() method once we are sure that the FCM plugin is ready.
I personally do this inside the getToken() method which is called after platform.ready().

  getToken() {
    FCM.getToken().then( token => {
      // Register your new token in your back-end if you want
      // backend.registerToken(token);
      console.log(token);
      // get push payload and display if notification was tapped
      FCM.getInitialPushPayload().then( data => {
        if(data) {
          if(data.wasTapped) {
               // we know the user launched the app by clicking on the notification

               // data here contains the data object we defined earlier so you can do whatever you want with the data like navigate to a specific page etc.
               console.log(JSON.parse(data));
          }
        }
      })
    });
  }

That is it :sunglasses:

FCM is quite easy to work with once you understand what is going on behind the scenes .

2 Likes

A minor edit to the last line of code

// data here contains the data object we defined earlier so you can do whatever you want with the data like navigate to a specific page etc.
               console.log(JSON.parse(data.data));

is it still working? does it works on iOS nowadays? Thank you

Eventhough I tested only on Android, there is no reason why the above code shouldn’t work on iOS provided firebase is set up correctly for ionic on iOS.

Does it works on iOS emulator? or should I need real device? Thank you

p.s: It is not working on emulator still… waste my time :frowning:

Two things come to mind.

Firebase hasn’t been configured correctly on iOS. The steps involve downloading a .plist file from the firebase console and saving it in your project.

Secondly, if you’re sure firebase has been configured correctly on your project, then try testing on a real device by sending test notifications from the firebase console.
You’d need a copy of the firebase token from your device to send a push notification.

dont have real device, that is the problem…

About plist, it is everything correctly…