Ionic 3 FCM open specific pages when notification tapped when app is in background/closed

Question

I can get the push notification when my apps is on background/closed and I can get the data in the payload of the notifications when i tapped it and open

"notification": {
    "title": "Chat Messages",
    "body": `You have received chat messages from ${userName}`,
    "sound": "default",
    "click_action":"FCM_PLUGIN_ACTIVITY",
    "icon":"fcm_push_icon"
},
"data": {
    "user_id" : from_user_id,
    "user_name" : userName,
    "type" : notification_type
}

but there is a problem which I can't make it open a specific page after i tapped the notification when in background/closed.

Here is my code in the app.components.ts:

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

import { LoginPage } from '../pages/login/login';
import { TestpagePage } from '../pages/testpage/testpage';

@Component({
   templateUrl: 'app.html'
})
export class MyApp {
@ViewChild('myNav') navCtrl: NavController
rootPage:any = LoginPage;

constructor(fcm: FCM, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
   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.
  statusBar.styleDefault();
  splashScreen.hide();

  fcm.onNotification().subscribe(function(data) {
    if(data.wasTapped) {
      alert('HI');
      if(data.type == 'messages') {
        alert('HEY');
        this.navCtrl.setRoot(TestpagePage);
      }

    } else {
      alert('Untapped<br>' +
            'User ID: ' + data.user_id + 
            '<br>User Name: ' + data.user_name +
            '<br>Type: ' + data.type);
     }
   });
  });
 }
}

It will execute the 'HI' and 'HEY' alert inside the if(data.wasTapped) { but it seems like the this.navCtrl.setRoot('TestpagePage'); is not fired. I don't know why please help me!

any errors in the console? also .if you are using lazy loading you shouldnt import the page in app.component.ts — Suraj Rao, Apr 17 '18 at 05:24
i updated my code and not using lazy loading anymore and this is what i get in the console `[INFO:CONSOLE(25891)] "Uncaught TypeError: Cannot read property 'setRoot' of undefined", source: file:///android_asset/www/build/vendor.js (25891)` — kelvin wong, Apr 17 '18 at 05:58
Oh.. use arrow function here: `fcm.onNotification().subscribe(function(data) {`.. `fcm.onNotification().subscribe((data) => {` — Suraj Rao, Apr 17 '18 at 05:59
Possible duplicate of [When should I use Arrow functions in ECMAScript 6?](https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6) — Suraj Rao, Apr 17 '18 at 05:59

score 1 · Accepted Answer · answered Apr 17 '18 at 06:18

1

So the problem have been solved.

Like @SurajRao suggested, instead of using fcm.onNotification().subscribe(function(data) { I followed his suggestion and updated my code to fcm.onNotification().subscribe((data) => { and it works.

answered Apr 17 '18 at 06:18

kelvin wong

51
1
6

Ionic 3 FCM open specific pages when notification tapped when app is in background/closed

1 Answers1