Receiving notification additional data on Ionic (ionic native push / phonegap-plugin-push)

Question

We are struggling with Ionic Native push plugin (which is based on phonegap-plugin-push). While we do receive push notifications sent, we cannot process the specific payload that we send so that when the notification is tapped, the app opens in a specific page.

For Android push notifications we use Firebase Cloud Messaging to deliver the notifications, for iOS we are using APNS.

The app opens, but either in the home page or whatever page was open before.

Here is our init push code:

private initPush() {
    this.push.hasPermission()
        .then((res: any) => {
           // just some console logs irrelevant to this question
        });
    const options: PushOptions = {
      android: { clearBadge: true, forceShow: true },
      ios: { alert: 'true', badge: true, sound: 'false', clearBadge: true },
      windows: {}
    };
    const pushObject: PushObject = this.push.init(options);
    try {
      pushObject.on('notification').subscribe((notification: any) => this.onNotification(notification));
      pushObject.on('registration').subscribe((registration: any) => this.onRegister(registration));
        pushObject.on('error').subscribe(error => this.onError(error));
        this.authorizationService.currentUser.subscribe((nextUser) => this.fullfillPushTokenRegistration());
    } catch (e) {
      console.error('Error on registering push methods', e);
    }
  }

  onNotification(notification): void {
      console.info('On Push Notification', JSON.stringify(notification));
      const addData = notification.additionalData;
      this.notificationEventsService.createEvent('push', 'click', addData);
  }

The onNotification method, which should be fired with the Ionic Native push "notification" event is never called, hence we can't process the additional payload that lets us navigate to the specific page related to the notification.

We're using the following versions:

@ionic/core: 4.11.1
@ionic-native/push: 5.15.0
phonegap-plugin-push: 2.3.0
@angular/core: 8.1.2

We are aware that this plugin is discontinued and that we should probably switch to OneSignal, but we're trying to avoid this unless it's our last resort, since it would require an additional development.

This is the Kotlin code fragment where we create the notification with the payload, if it helps:

val message = Message.builder().setToken(device.deviceToken)
val fcmNotification: com.google.firebase.messaging.Notification = com.google.firebase.messaging.Notification(
            notification.title, notification.message
        )
message.setNotification(fcmNotification)
message.putData("action", notification.action!!.toString())
message.putData("pendingToViewUserNotifications", pendingToViewUserNotifications.toString())
message.putData("referenced", notification.referenced)
message.putData("notificationId", notification.id.toString())
message.putData("title", notification.title)
message.putData("body", notification.message)
message.putData("badge", pendingToViewUserNotifications.toString())
message.putData("content-available", "1")

when (device.deviceOs!!.toLowerCase()) {
    "android" -> message.setAndroidConfig(AndroidConfig.builder()
        .setTtl(3600 * 1000)
        .setNotification(AndroidNotification.builder()
        .setIcon("stock_ticker_update")
        .setColor("#f45342")
        .build())
        .build())

Answer 1

Not sure if this will work for you but in my previous app, I had to set different structure for both android and iOS.

Android:

      registration_ids : [],
      data: {
        notId: "", // notId on Android needed to be an int and not a string
        title: "",
        body: "",
        soundname: "default",
      }

iOS:

      registration_ids : [],
      notification:{
        title: "",
        body: "",
        sound: "default",
      },
      data: {
        title: "",
        body: "",
      }

OR..

you could go thru this Android notification data pass where below payload should work for both Android & iOS.

{ "priority" : "high", "notification" : { "title": "Title", "body": "Body", "sound": "default", "click_action": "com.adobe.phonegap.push.background.MESSAGING_EVENT" }, "data" : { "more": "data goes here" }, "to" : "id" }

Hope this helps. Cheers.

Answer 2

So I finally managed to fix it... had to set a content-available: "1" in the data payload AND a contentAvailable: true in the push request body, as well as setting noCache: "1".

Ditched out the Firebase SDK and manually performed the request, now it finally calls on('notification').

You'll want to handle also in your notification callback if additionalData.foreground is true, because in foreground the notification event is fired as soon as the notification is displayed, and fired again with foreground to false when tapped.

Here's the sample payload I'm sending to FCM API that worked:

{
    "to":"FIREBASE_TOKEN",
    "content_available": true,
    "data": {
        "action": "ACTION(Custom payload data)",
        "referenced": "REFERENCED(Custom payload data)",
        "force-start": "1",
        "content-available": "1",
        "no-cache": "0",
        "notId": "4361c4f5-ae8d-42fa-a863-a04acff2ab7a",
        "title": "TEST"
    }
    "priority":10
}