Go to a specific page when clicking on a notification

Ionic Framework ionic-v3
1

How to go to a specific page when clicking on a notification?
I used like this, but it didn’t work

  fcm.onNotification().subscribe(data=>{
      if(data.wasTapped){
    this.navcntrl.push(MessagePage); 
      };
    })

how i can do it correctly?

1 Like
2

you are inside an event handler… ‘this’ is local to the event handler

set another variable to the class ‘this’

var self=this
  fcm.onNotification().subscribe(data=>{
      if(data.wasTapped){
           self.navcntrl.push(MessagePage); 
      };
    })
3

Are you sure it is still the case when fat arrow function is used? (=>). I think in this case “this” is still the component this method is in.

Now as for the issue:

  • notifications objects sent from your server have 2 parts: “notification” (contains details that are used if the app is in BACKGROUND) and “data” (contains payload the app receives if the app is in FOREGROUND).
  • so depending on state (background or foreground) you should act accordingly:
  1. If BACKGROUND - you need to define click_action in the notifications object.
  2. if FOREGROUND - you can pass required flags inside of “data”

See example of notification object below:

{
  "notification":{
    "title":"Notification title",  //Any value
    "body":"Notification body",  //Any value
    "sound":"default", //If you want notification sound
    "click_action":"FCM_PLUGIN_ACTIVITY",  //Must be present for Android
    "icon":"fcm_push_icon"  //White icon Android resource
  },
  "data":{
    "param1":"value1",  //Any data to be retrieved in the notification callback
    "param2":"value2"
  },
    "to":"/topics/topicExample", //Topic or single device
    "priority":"high", //If not set, notification won't be delivered on completely closed iOS app
    "restricted_package_name":"" //Optional. Set for application filtering
}

Then basically you can do if data.param1 === true etc

2 Likes
4

inside an arrow function, this and arguments refer to the values of this and arguments in the environment the arrow function is defined in (i.e. “outside” the arrow function):

Taken from here: javascript - Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? - Stack Overflow

5

BTW you have typo in your code? navcntrl.push…

6

I use firebase console to push the notifiction
My full code: app.component.ts


import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { FCM } from '@ionic-native/fcm';


declare var cordova: any;
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;
cordova:any;
  constructor(public platform: Platform,private fcm: FCM, public statusBar: StatusBar, public splashScreen: SplashScreen) {

    fcm.onNotification().subscribe(data=>{
      
      this.nav.push(ListPage)
      
    })

    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'List', component: ListPage }
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

But I can’t go to the ListPage when I clicking the notification
pls help me
thanks in advance

7

Can you put a console.log(data); or alert() just above this.nav.push(ListPage)?

Just to check that the code gets executed when receiving a notification.

8

@MattE
yup, alert() not working
but if the app is in the foreground the else part alert work perfectly

 this.fcm.onNotification().subscribe(data=>{
        if(data.wasTapped){
          alert("tappedss when killed");
        }
        else {
          alert(JSON.stringify(data));

        }

      } );
9

Do a console.log(data) before the if/else.
Maybe you’ve used the wrong value on the data-object.

10

@MattE
nothing as wrong
but it didn’t work
pls help :persevere::disappointed_relieved::disappointed_relieved:

11

What is the exact value of data.wasTapped?

Or rather: show the contents of the data variable so we can inspect.

12

value of data.wasTapped is ‘true’

13

True with or without quotes? That makes a huge difference.
Please post the contents of data in a screenshot here.

14

I solve this issue.
You have to add the property “click_ action”: “FCM_PLUGIN_ACTIVITY” to the “notification” object in order to properly use the background method.

Example:

{
 "to" : "tokenHere",
 "notification" : {
     "title": "title",
     "body" : "message",
     "sound": "default",
     "click_action":"FCM_PLUGIN_ACTIVITY"
 },
 "data": {
 	"content": "whatever",
 },
 "priority":"high"
}

and use FCM API. Don’t use firebase console.

4 Likes
15

Hello @Faizyfaazz,

As you what mentioned in it, i too do that same…title message click_actions are working fine…The only problem i met is , i can’t able to set app icon…even i set color by using “color”, “#008000” …but icon fails…Kindly help me if possible

16

where? i dont find where to add that? in what file?

17

where do i have to create that object with the click_action???

18

Thank you so much…

19

Does not work. I receive following error: Object literal may only specify known properties, and ‘click_action’ does not exist in type 'ILocalNotification | ILocalNotification

20

This solution doesnt work for me: Object literal may only specify known properties, and ‘click_action’ does not exist in type 'ILocalNotification | ILocalNotification