Ionic 2 Push Notifications with FCM

Question

I'm implementing Push Notifications on my Android Ionic 2 App with the Ionic Native FCM

When I'm receiving a notification in the foreground it works, but when I'm receiving a notification in the background and if I clicked on it, nothing happens.

app.component.ts

firebaseInit(){
  //Firebase
  this.fcm.subscribeToTopic('all');

  this.fcm.getToken()
    .then(token => {
      console.log(token);
      this.nativeStorage.setItem('fcm-token', token);
  });

  this.fcm.onNotification().subscribe(
    data => {
      console.log("NOTIF DATA: " + JSON.stringify(data));
      if(data.wasTapped){
        this.nav.push(MemoViewPage, {memo: {_id: data.memo_id}})
        console.info('Received in bg')
      }else{
        let alert = this.alertCtrl.create({
          title: data.subject,
          message: "New memorandum",
          buttons: [
            {
              text: 'Ignore',
              role: 'cancel'
            },
            {
              text: 'View',
              handler: () => {
                this.nav.push(MemoViewPage, {memo: {_id: data.memo_id}})
              }
            }
          ]
        });

        alert.present();
        console.info('Received in fg')
      }
  });

  this.fcm.onTokenRefresh()
    .subscribe(token => {
      console.log(token);
  })
}

The if(data.wasTapped) condition doesn't go off once I clicked the notification from the system tray.

EDIT

The app opens but only in the Home Page not to the designated page that I set which is this.nav.push(MemoViewPage, {memo: {_id: data.memo_id}})

I also cannot receive notifications when the app is killed or not running.

Answer 1

you could use push plugin instead of FCM.

this.push.createChannel({
 id: "testchannel1",
 description: "My first test channel",
 importance: 3
}).then(() => console.log('Channel created'));

and then you could use pushObjects to specify the needs for your notification like sound, ion etc.

const options: PushOptions = {
   android: {},
   ios: {
       alert: 'true',
       badge: true,
       sound: 'false'
   },
   windows: {},
   browser: {
       pushServiceURL: 'http://push.api.phonegap.com/v1/push'
   }
};

After that it is easy for you to receive notifications whether you are using the app or not

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

pushObject.on('registration').subscribe((registration: any) => this.nativeStorage.setItem('fcm-token', token));

pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));

you could use the option of forceShow:true in the pushObject init for the app to show the notification whether you are using the app or not.

And once you clicked the notification the notification payload is received by the app with the app home page set as default.