Open a page after click on notification using ionic and firebase cloud messaging

Question

Good evening. I am trying to handle notification click in such a way that when the user click on a notification, a specific page of my application is opened. I am using FIREBASE COULD MESSAGING AND IONIC 3

Here is the code of the app.component.ts file in witch the code for handling notification is written :

import { Platform, Nav, ToastController } from 'ionic-angular';

import { HomePage } from '../pages/home/home';

import { Component, ViewChild } from '@angular/core';

import { FCM } from '@ionic-native/fcm';

import { Signup } from '../pages/signup/signup';

   @Component({
      templateUrl: 'app.html',
      selector: 'Myappname',
   })
   export class MyApp {

        @ViewChild(Nav) nv: Nav;

        rootPage: any = HomePage;

        constructor(public fcm: FCM, platform: Platform) {

          platform.ready().then(() => {

                  fcm.onNotification().subscribe(data => {

                         if (data.wasTapped) {

                              this.nv.push(Signup);

                         } else {

                           console.log("Received in foreground");

                         }
                 })
         });
    }
 }         

When the nofication is received on the mobile device, if the user click on it, only the home page is displayed and he is note redirected to the signup page as specified in the code.

Any helps ? Thanks.

Answer 1

I finally found the solution. as i was using firebase cloud functions to send the notification, here is the code i used to make the onNotification() work when a user click on the notification received.

exports.Hello = functions.database.ref('/users/{userId}').onCreate(event=>{

         admin.messaging().sendToTopic('all', {
              data:{
                 "key1": value1,
                 "key2": value2
              },
              notification: {
                  clickAction : "FCM_PLUGIN_ACTIVITY",
                  sound : "default",
                  title : "Notification title",
                  body : "message content"
              }
         });

});

So We must set clickAction property of the notification object to FCM_PLUGIN_ACTIVITY to make onNotification() method execute when the user tapped on the notification.

Here is a code exemple for the app.component.ts in witch the onNotification() method is implemented.

  import { Platform, Nav, ToastController } from 'ionic-angular';

  import { HomePage } from '../pages/home/home';

  import { Component, ViewChild } from '@angular/core';

  import { FCM } from '@ionic-native/fcm';

  import { Signup } from '../pages/signup/signup';

  @Component({
        templateUrl: 'app.html',
        selector: 'Myappname',
  })
  export class MyApp {

    @ViewChild(Nav) nv: Nav;

    rootPage: any = HomePage;

    constructor(public fcm: FCM, platform: Platform) {

      platform.ready().then(() => {

              fcm.onNotification().subscribe(data => {

                     if (data.wasTapped) {

                          this.nv.push(Signup);

                     } else {

                       console.log("Received in foreground");

                     }
             })
           });
      }
  }         

AND now, it works fine !

Answer 2

Try setting the root page as the signup page, hopefully it will work:

this.nv.setRoot(Signup);

and if that doesnt work try adding this before your fcm.onNotification()

var $this = this;

and then use $this to reference inside your if statement // (wasTapped)

$this.nv.setRoot(Signup);