Setting different 'click_action' for web and ionic apps

Question

I have a web application (Angular 6) and mobile application (Ionic 4) and both are connected to the same database. And I'm using FCM ( Firebase Cloud Message ) for Push Notifications. I have followed 2 links 1. https://www.djamware.com/post/5c6ccd1f80aca754f7a9d1ec/push-notification-using-ionic-4-and-firebase-cloud-messaging 2. https://medium.com/@selvaganesh93/firebase-cloud-messaging-important-rest-apis-be79260022b5

I have created FCM "Group" for each user. This means a user can log in to the application using multiple devices ( browser OR mobile ) and this user will have one "fcm_notification_key" which consist of FCM token from different devices.

So now when the application pushes any notification to this unique "fcm_notification_key" key, all the devices ( web and ionic app ) connected with this key will receive. This is working perfectly.

  "notification":{
    "title":"Notification Title",
    "body":"Notification Body",
    "click_action" : "myweb.com/specific_url",
  }

  "notification":{
    "title":"Notification Title",
    "body":"Notification Body",
    "click_action" : "FCM_PLUGIN_ACTIVITY",
  }

First one is working with web and when a user clicks the notification, URL speicifed at "click_action" is open in the browser. Which is correct.

The second one is working with Ionic app. When a user clicks on the notification, it opens the Ionic app since "FCM_PLUGIN_ACTIVITY" is specified for "click_action". This is also correct.

But the problem is, now I'm sending notifications to the Group ( which will contain web app and ionic app ). How should I send the data so that it will work for both web and ionic?

Answer 1

You can have a method in your json and based on the type, handle the event from a function

"notification":{
   "title":"Notification Title",
   "body":"Notification Body",
   "click_action: ()" : "click_action()",
}

TS:

click_action() {
  if(app) {

  } else {   
}

Answer 2

Well you want to handle different types of click_action and other parameters per devices belongs to particular group of devices belongs to user,

If that is so then answer to this question is : you can merge notification payload options like given below, by customising parameters per device belongs to particular group, for reference official documentation of group messaging

{
  "name": string,
  "data": {
    string: string,
    ...
  },
  "notification": {
    object (Notification)
  },
  "android": {
    object (AndroidConfig)
  },
  "webpush": {
    object (WebpushConfig)
  },
  "apns": {
    object (ApnsConfig)
  },
  "fcm_options": {
    object (FcmOptions)
  },

  // Union field target can be only one of the following:
  "token": string,
  "topic": string,
  "condition": string
  // End of list of possible types for union field target.
}

so to answer How should I send the data so that it will work for both web and ionic ?,

It will be something like given below

{
  "name": string | key,
  "notification":{
    "title":"Notification Title",
    "body":"Notification Body",
  },
  "android": {
      "notification": {
          "click_action" : "FCM_PLUGIN_ACTIVITY",
      }
   },
  "webpush": {
      "notification": {
          "click_action" : "myweb.com/specific_url",
      }
   },
    
  ...,
  ...,
  ...,
}

For reference documentation.

Hope it helps, cheers :)