[Ionic 3] Push Notification on click event does not work when app is in background or cold start state!

Ionic Framework ionic-v3
1

I’m using Ionic 3 and phone-gap plugin to receive push notification on my hybrid mobile app.

-When the notification comes, if the app is in foreground then an pop-up will be fired and there’s a button to redirect to a specific page in my app. —> this works great.

-If the app is in background or hasn’t been started yet, the notification will appear in the notification center (or the shade as how many people call it) and when user click on it, a specific page will be opened. -->This doesn’t work, the only thing the click does is starting the app from the root page (cold start) or the current page (background).

(*) I’m calling my push method in the app.component.ts file.

Any help or suggestion will be so much appreciated. Thanks a lot.
…
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();
this.storage.get(‘avatarURL’).then((val) => {
if (val == null)
this.storage.set(‘avatarURL’, ‘images/Home_Minion.jpg’);
});
this.initPushNotification();
});
initPushNotification() {
// to check if we have permission
this.push.hasPermission()
.then((res: any) => {
if (res.isEnabled) {
console.log(‘We have permission to send push notifications’);
} else {
console.log(‘We don’t have permission to send push notifications’);
}
});

// check the platform we're running on
if (!this.platform.is('cordova')) {
  console.warn('Push notifications not initialized. Cordova is not available - Run in physical device');
  return;
}
// to initialize push notifications
const options: PushOptions = {
  android: {
    senderID: '910773486558'
  },
  ios: {
    alert: 'true',
    badge: true,
    sound: 'false'
  },
  windows: {}
};
const pushObject: PushObject = this.push.init(options);

pushObject.on('notification').subscribe((data: any) => {
  console.log('message -> ' + data.message);
  //if user using app and push notification comes
  if (data.additionalData.foreground) {
    // if application open, show popup
    let confirmAlert = this.alertCtrl.create({
      title: 'Đánh Giá Chất Lượng Dịch Vụ',
      message: data.message,
      buttons: [{
        text: 'Bỏ qua',
        role: 'cancel'
      }, {
        text: 'Đánh giá',
        handler: () => {
                     this.nav.push(DanhGia1Page, { message: data.additionalData.dichVuID });            
        }
      }]
    });
    confirmAlert.present();
  } else {
    //if user NOT using app and push notification comes      
    this.nav.push(DanhGia1Page, { message: data.additionalData.dichVuID });   
    console.log('Push notification clicked');
  }
});

pushObject.on('registration').
  subscribe((registration: any) => {
    this.storage.set("DeviceToken", registration.registrationId);
    console.log('Device registered', registration)
  });
pushObject.on('error').
  subscribe(error =>
    console.error('Error with Push plugin', error));

}

2

when you’re using the app(Foreground) you will get push notifications and based on your logic you will be redirected to specified page.

but when it comes to background mode or app is not yet initialized we have a check called coldstart,

pushObject.on ('notification').subscribe ((data: any) => {
     //Your Logic
     if (data.additionalData.coldstart) {
          // Background
     }
    else (data.additionalData.foreground) {
         // Foreground 
    }
}

Note: if (data.additionalData.coldstart) { //Backgroung mode} In order to trigger background mode notifications you have to set a flag content-available to 1 in your response PushObject data of GCM controller.

ex:

var message = new.gcm.Message({
    "content-available": 1,
    body: "some string",
    icon: "",
    sound: 'default'
})

this worked for me, Hope this works for you too :grinning:

3 Likes
3

Thank you for your quick response. However, in my code, there’s already a check if the app is running in background or foreground and that’s why the handler for foreground worked as how I expected.

About the flag you mentioned, since I haven’t implemented back-end integration for push notification yet so for now, I’m using the Firebase console in order to send the push content and I’m not so sure where I should put the flag in. I’ve tried setting the flag as a key-value pair in the “Custom data” section but there’s still no luck.

image

4

hi did you make it work??