I want to open a particular page of my app on notification click in Ionic2

Ionic Framework ionic-v3
1

Consider this scenario. I have an ionic2 app and I am using the the FCM plugin for push notifications. Now let us say a push notification arrives when the app is in the background. User, views the notification in the App drawer and then clicks the notification for further information. I would like the user to navigate to a particular path using this.nav.push(PushPage). How can I tap into the notification click event?I tried something like this.but it did not

app.component.ts

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


import { HomePage } from '../pages/home/home';
import {PushPage} from '../pages/push/push';
declare var FCMPlugin;
@Component({
  template: '<ion-nav #myNav [root]="rootPage"></ion-nav>',
providers :[FCM]

})
export class MyApp {
 rootPage:any = HomePage;
@ViewChild('myNav') nav: NavController;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,privatefcm:FCM, private alertCtrl: AlertController) {
   platform.ready().then(() => {
   statusBar.styleDefault();
   splashScreen.hide();

   fcm.subscribeToTopic('marketing');
   fcm.getToken().then(token=>{

  })

   fcm.onNotification().subscribe(data=>{
    if(data.wasTapped){
     console.log("Received in background");
     this.nav.push(PushPage); 
   } else {
       console.log("Received in foreground");
       this.nav.push(PushPage);
   };
 })

  fcm.onTokenRefresh().subscribe(token=>{
    this.nav.push(PushPage);
 })
  fcm.unsubscribeFromTopic('marketing');

   });

 }

}
1 Like
2

I don’t know FCM plugin but if you consider changing it to OneSignal it has some options to do what you want.

3

I tried OneSignal.Notifications coming.But there is no page switch.Do you have a place or a suggestion that you see wrong

SAMPLE ONESİGNAL

app.component.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 { OneSignal } from '@ionic-native/onesignal';

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

    @Component({
       template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
    })
      export class MyApp {
        rootPage:any = HomePage;
        @ViewChild('myNav') nav: NavController;

        constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
          SplashScreen,private oneSignal: OneSignal) {
        platform.ready().then(() => {
 
         statusBar.styleDefault();
         splashScreen.hide();


      window["plugins"].OneSignal
      .startInit("xxxxxxxxxxxxxxx", "xxxxxxxxxxxxxxx")
     .handleNotificationOpened()
          .handleNotificationReceived()
       .endInit();
  
      });

        this.oneSignal.handleNotificationOpened().subscribe((jsonData) => {
       // do something when a notification is opened
        alert(JSON.stringify(jsonData));
       this.nav.push(PushPage);
   });

        this.oneSignal.handleNotificationReceived().subscribe((jsonData) => {
         // do something when notification is received
           alert(JSON.stringify(jsonData));
          this.nav.push(PushPage);
      });


      }
  }
4

facing this same issue looking forward to getting a good feedback

5

Handling click on notification when app is closed/minimized/open think this should help out

1 Like