open specific page using firebase api

Question

I am sending push notification to devices using below code.

      var nTitle = "New message from " + $rootScope.clients_firstName;
      var to = "DeviceToken is here";
      var notification = {
        'title': nTitle,
        //'body': 'Click here to more details...',
        'icon': 'firebase-logo.png',
        'click_action': 'openapp'
      };

      var key = 'your key';
      fetch('https://fcm.googleapis.com/fcm/send', {
      'method': 'POST',
        'headers': {
        'Authorization': 'key=' + key,
        'Content-Type': 'application/json'
      },
      'body': JSON.stringify({
        'notification': data,
        'to': to
      })
      }).then(function(response) {
        //console.log("res ", response);
      }).catch(function(error) {
        console.error("err ", error);
     });

push notification sends on device successfully.

But when I click on notification the specific page should be open.

For example 'click_action' : 'openapp/somepage'

Then the 'somepage' should be open when I click on pushnotification.

AndroidManifest.xml

<activity android:name="MainActivity" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">

        <intent-filter>
            <action android:name="openapp" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
        </intent-filter>

</activity>

My project structure

--platforms
--plugins
--www
  --app
    --about
      --about.html
      --about.ctrl.js
    --product
      --product.html
      --product.ctrl.js
  --css
  --js
  --lib
  index.html

If I click on notification and I want to open product or about page then what I have to do?

What is wrong here? Please tell me the proper solution.

Answer 1

For notifications to be clickable when your app is in the background, you need the click_action attribute in your notification payload.

Please check this section of the Firebase docs.

Also, when you define the click_action attribute, you will also need a corresponding <action> attribute in the <intent-filter> of the activity that you wish to launch.

This video explains it in quite a detailed manner.

Though, please note that you can not set the click__action attribute if you're sending notifications from the Firebase Console. You can only do so if you send a notification from your own Admin server or using Firebase Cloud Functions.

Lastly, in the activity that is launched, you can set additional Data using the data attribute ( also shown in the same doc that I linked above ). And when you launch your app by clicking on a notification, you can obtain the notification data using getIntent(). Check out this answer for more details on how to do that.

Edit after question update :-

Instead of putting that <intent-filter> in MainActivity, put the filter in the <activity> tag of the activity that you want to open when the notification is clicked. An example is the following :-

<activity android:name="ProductDetailsActivity" android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">

    <intent-filter>
        <action android:name="openapp" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
    </intent-filter>

Now that your specified activity opens, you can get information from the data part of your notification using getIntent().

For example, if your notification payload has the following structure,

payload = {
  notification: {
    title: `You ordered a new product`,
    click_action : 'HANDLE_NOTIFICATION',

  },
  data : {
        product_id : 'ABC98292',
        type : `Clothes`,
        product_name : 'Cotton spring shirt'
    }
};

Then you can get the product_id from the notification using getIntent().getStringsExtra("product_id") and so on.

This way, you'll be opening the required activity, and can populate it with the relevant details obtained from your notification without using any additional frameworks.

Answer 2

I know that you ask about Ionic 1. But I only know for Ionic 2. Hope this will help you.

I think you should add information about what page you need to open in additional data section of your notice. Something like this:

'body': JSON.stringify({
        'notification': data,
        'to': to,
        'data' : {
           'action' : 'Needed page'
        }
      })

And then you should catch it on the subscribe method. Something like that:

fcm.onNotification().subscribe(data=>{
  console.log("data", data);
  if (data['action'] && data['action'] == 'Needed page'){
    this.navCtrl.push('Needed page'); //Use Navigation controller to open needed page
  }
})

For native cordova FCM plugin:

FCMPlugin.onNotification(function(data){
    console.log("data", data);
    if (data['action'] && data['action'] == 'Needed page'){
      this.navCtrl.push('Needed page'); //Use Navigation controller to open needed page
    }
});