Open specific page on notification

Ionic Framework ionic-v3
1

Hi all,
can you please tell me how is possible to redirect to specific page after clicking on notification if app is in background or if cold start of app? I am using push plugin.

My code in app.component.ts in platform.ready function:


pushObject.on('notification').subscribe((notification: any) => {
            console.log('Received a notification', notification)
            if (notification.additionalData.foreground) {
                // if application open, show popup
                let notifAlert = this.alertCtrl.create({
                    title: notification.title,
                    message: notification.message,
                    cssClass: "notification",
                    buttons: [{
                        text: 'View',
                        role: 'cancel',
                        handler: () => {
                            //TODO: Your logic here
                            console.log("click alert")
                            if (notification.additionalData.key_code == "new_message") {
                                this.nav.push(MessagesPublicPage);
                            }
                        }
                    }]
                });
                notifAlert.present();

                setTimeout(function () {
                    notifAlert.dismiss()
                }, 5000);

            } else {
                //if user NOT using app and push notification comes - NOT working, redirect to default rootPage
                /if (notification.additionalData.key_code == "new_message") {
                     this.rootPage = MessagesPublicPage;
                 }
                console.log("Push notification clicked");
            }
        });

Thanks a lot

2

try this.nav.setRoot(MessagesPublicPage)

3

If that code is on your app.component.ts probably you don´t have the nav property, you can try setting the variable rootPage.

this.rootPage = MessagesPublicPage;
4

No luck with this. App is still redirecting to root page which is defined before notification registration :-/

5

that’s odd - I do the same in my app and it works - are you 100% sure that line is being executed?

6

one slight difference is that I don’t subscribe in platform.ready - I call my subscription method from the constructor.

7

Actualy I am not sure that line is being executed (no console log presented).

Here is whole my app.component.ts:

  ngOnInit() {
        this.initializeApp();
    }
    initializeApp() {
        this.platform.ready().then(() => {
            this.rootPage = MessagesPage;
            this.initPushNotifications();
            this.getDeviceInfo();

            this.statusBar.styleDefault();
            this.statusBar.backgroundColorByHexString('#2d2d2d');
            if (this.splashScreen) {
                setTimeout(() => {
                    this.splashScreen.hide();
                }, 500);
            }


        });
    }

    getDeviceInfo() {
        this.deviceModel = this.device.model;
        this.devicePlatform = this.device.platform;
        this.deviceID = this.device.uuid;
        this.deviceVersion = this.device.version;

        localStorage.setItem("device", JSON.stringify({
            "model": this.deviceModel,
            "platform": this.devicePlatform,
            "id": this.deviceID,
            "version": this.deviceVersion
        }))


    }

    initPushNotifications() {

        const options: PushOptions = {
            android: {
                sound: 'true',
                vibrate: 'true'

            },
            ios: {
                alert: 'true',
                badge: true,
                sound: 'false'
            },
            windows: {},
            browser: {}
        };


        const pushObject: PushObject = this.push.init(options);


        pushObject.on('notification').subscribe((notification: any) => {
            console.log('Received a notification', notification)
            if (notification.additionalData.key_code && notification.additionalData.key_code == "new_message") {
                this.events.publish('setMessageCount');
            }
            if (notification.additionalData.foreground) {
                // if application open, show popup
                let notifAlert = this.alertCtrl.create({
                    title: notification.title,
                    message: notification.message,
                    cssClass: "notification",
                    buttons: [{
                        text: 'View',
                        role: 'cancel',
                        handler: () => {
                            //TODO: Your logic here
                            console.log("click alert")
                            if (notification.additionalData.key_code == "new_message") {
                                this.nav.push(MessagesPublicPage);
                            }
                        }
                    }]
                });
                notifAlert.present();

                setTimeout(function () {
                    notifAlert.dismiss()
                }, 5000);

            } else {
                if (notification.additionalData.key_code == "new_message") {
                    this.nav.setRoot(MessagesPublicPage);
                }
                console.log("Push notification clicked");
            }
        });


        pushObject.on('registration').subscribe((registration: any) => {
            localStorage.setItem("registrationId", registration.registrationId);

        });

        pushObject.on('error').subscribe(error => {
            console.error('Error with Push plugin', error)
        });


    }
1 Like
8

This is my function (which I call from the constructor, not from platform.ready like you do)

pushNotificationsHandler() {
    // initialise Push Notifications
    const pushObject: PushObject = this.pushService.initialise();

    // if a notification arrives and the app is
    // not running in the foreground, handle it
    if (pushObject !== undefined) {
      pushObject.on("notification").subscribe((data: any) => {
        if (!data.additionalData.foreground) {
          this.pushData = data;
          this.openPushItem();
        } else {
          this.pushData = null;
        }
      });
    }
  }

in the openPushItem function I then do

this.nav.setRoot('MyComponent");

(using Lazy Loading)

2 Likes
9

So for now I have the same code as you:


            pushObject.on("notification").subscribe((data: any) => {
                console.dir("ON NOTIFICATION RESP: ", data)
                if (!data.additionalData.foreground) {
                    this.nav.setRoot(MessagesPublicPage);

                } else {
                    this.nav.setRoot(MessagesPage);
                }
            });

If the app is running, I can see in console log message ON NOTIFICATION RESP. But when the app is closed and notification is received, no console log on receive.

So I guess the app ignore it :-/. Also app has only blank white screen, because no root page is defined before.

I am also calling push initialization from constructor. But I have to place it in platform ready. If it is not in, the app tells me that push notification can`t be initialized due to not installed plugin :-/

Is it possible to share more from you code?

Thanks a lot

1 Like
10

So for now (after reinstalling platforms) iOS is working also if app i closed and notification comes. But Android not… :ú

11

Dude it works for me for all platforms. Just put it above all other construct calls in your constructor! And make sure the push plugin ist the first one that initialized!

12

That’s my point - If you want to jump to a certain page due to a click on a push notification, then this scenario is possible:

  1. the user clicked the PushNotification
  2. the app starts
  3. the app loads the homescreen
  4. the notification event is triggered - the app jumps to another screen

I’m wondering how to get over it

13

I am facing the same problem, did you fixed this problem ?

  1. the user clicked the PushNotification
  2. the app starts
  3. the app loads the homescreen
  4. the notification event is triggered - the app jumps to another screen
14

Unfortunately no. :-/

15

Any solution to this issue?

16

anyone tried with deeplinks ?

17

This setup worked for me as well.

I initially had my listeners set up after the platform.ready() and experienced the same behavior that mcihak describes: the app would launch from the background and for an instant load the page I wanted. But then it would re-navigate to the default page.

Once I moved the listeners to the constructor, to be run before the platform.ready() function, I was able to setRoot to my preferred page. Which prevented the default root from being set.