Navigate to a page on fcm push notification click

#1

I have done the push notification functionality with fcm plugin. And i am able to alert or console the results in my FCMPlugin.onNotification action. Is there any way to navigate to a page while clicking on the notification.??

The code which i have tried is given below:

FCMPlugin.onNotification(function (data) {
if (data.wasTapped) {
//Notification was received on device tray and tapped by the user.
alert(JSON.stringify(data));
//this.nav.push(‘LoginPage’); //need to do something like this
} else {
//Notification was received in foreground. Maybe the user needs to be notified.
alert(JSON.stringify(data));
}
}, function (msg) {
console.log('onNotification callback successfully registered: ’ + msg);
});

Thanks in advance.

#2

You can just put :
this.$state.go('LoginPage');
I don’t know if it’s what you are looking for.

#3

Thanks for the reply. Actually I cannot even refer to the ‘this’ object inside onNotification action. Console is showing “Uncaught TypeError: Cannot read property ‘go’ of undefined”.

#4

What is your version of ionic ?

#5

ionic -v in command gives me 3.9.2.

#6

have you imported state ?

#7

No. should i share my code???

#8

Will be helpful. Post your code buddy

#9

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, AlertController } from ‘ionic-angular’;
import { AuthServiceProvider } from ‘…/…/providers/auth-service/auth-service’;
import { AngularFireDatabase } from ‘angularfire2/database’;
import { Observable } from ‘rxjs’;

import firebase from ‘firebase’;

declare var FCMPlugin;

@IonicPage()
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
firestore = firebase.database().ref(’/pushtokens’);
firemsg = firebase.database().ref(’/messages’);
userId: any;
constructor(private nav: NavController, private auth: AuthServiceProvider, private navParams: NavParams, public afd: AngularFireDatabase,
public alertCtrl: AlertController) {

    this.storeTockenAndSendNotification();
}

storeTockenAndSendNotification() {
    if (typeof FCMPlugin != 'undefined') {
        this.tokensetup().then((token) => {
            this.storetoken(token);
        });
    }
}

ionViewDidLoad() {
    if (typeof FCMPlugin != 'undefined') {
        FCMPlugin.onNotification(function (data) {
            if (data.wasTapped) {
                //Notification was received on device tray and tapped by the user.
                //alert(JSON.stringify(data));
                console.log('tapped');
                //this.$state.go('LoginPage');
                //this.nav.push('LoginPage');
            } else {
                //Notification was received in foreground. Maybe the user needs to be notified.
                //alert(JSON.stringify(data));
                console.log('foreground');
            }
        }, function (msg) {
            console.log('onNotification callback successfully registered: ' + msg);
        });

        FCMPlugin.onTokenRefresh(function (token) {
            alert(token);
        });      

        //FCMPlugin.onNotificationOpen(function (notification) {
        //    console.log(notification);
        //}, function (error) {
        //    console.error(error);
        //});      
    }
}

tokensetup() {
    var promise = new Promise((resolve, reject) => {
        FCMPlugin.getToken(function (token) {
            resolve(token);
        }, (err) => {
            reject(err);
        });
    })
    return promise;
}

storetoken(t) {

    this.afd.list(this.firestore).push({
        uid: firebase.auth().currentUser.uid,
        devtoken: t

    }).then(() => {
        alert('Token stored');
    }).catch(() => {
        alert('Token not stored');
    })

    this.afd.list(this.firemsg).push({
        sendername: firebase.auth().currentUser.email,
        message: this.notification,
        devtoken: t
    }).then(() => {
        alert('Message stored' + firebase.auth().currentUser.email);
    }).catch(() => {
        alert('Message not stored');
    })

} 

}

#10

import { TargetState, StateService } from 'ui-router-core';

 constructor(appConfig: AppConfigService,
               private authService: AuthService,
               private $state: StateService
 )
 
 this.$state.go(state, params, options)

From the first link stackoverflow :slight_smile:

#11

I have tried this. But getting an error in console on loading the page itself.

#12

Thanks in advance.

Is there any solution for this issue. I am facing the same issue right now.

I couldn’t able to navigate or populate the custom alert inside the FCM PLUGIN method: onNotification

#13

Hi, have you solved this? i am facing the same issue too. thanks in advance