Push notification is not working on Background - firebase

Question

I'm using native firebase plugin's push notification feature.
Current behavior:
It is working fine with the foreground.But when the app is in the background and I try to tap the notification it shows undefined.Please see the video below.I have tested this on Anroid device.
Expected behavior:
When I tap the notification message it should open the app and show the message correctly.
Video
app.component.ts
constructor(public platform: Platform)
{
platform.ready().then(() => {
this.onNotificationOpen();
});
}
onNotificationOpen(): void {
if (this.platform.is('cordova')) {
this.firebase.onNotificationOpen()
.subscribe(res => {
if (res.tap) {//background mode
console.log(res.body);
this.showAlert(res.body);
} else if (!res.tap) {//foreground mode
console.log(res.body);
this.showAlert(res.body);
}
});
}
}
showAlert(message: string): void {
let alert = this.alertCtrl.create({
title: 'Push Notification',
subTitle: message,
buttons: ['OK']
});
alert.present();
}
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.1.0",
"#angular/compiler": "4.1.0",
"#angular/compiler-cli": "4.1.0",
"#angular/core": "4.1.0",
"#angular/forms": "4.1.0",
"#angular/http": "4.1.0",
"#angular/platform-browser": "4.1.0",
"#angular/platform-browser-dynamic": "4.1.0",
"#ionic-native/core": "3.6.1",
"#ionic-native/device": "3.6.1",
"#ionic-native/facebook": "^3.10.0",
"#ionic-native/firebase": "^3.10.3",
"#ionic-native/keyboard": "^3.10.3",
"#ionic-native/splash-screen": "3.6.1",
"#ionic-native/status-bar": "3.6.1",
"#ionic/cli-plugin-cordova": "^1.2.0",
"#ionic/cli-plugin-ionic-angular": "^1.2.0",
"#ionic/storage": "2.0.1",
"#ngrx/core": "^1.2.0",
"#ngrx/store": "^2.2.1",
"d3": "^4.7.4",
"firebase": "^3.7.5",
"ionic-angular": "3.2.1",
"ionicons": "3.0.0",
"moment": "^2.18.1",
"pouchdb": "^6.1.2",
"pouchdb-adapter-cordova-sqlite": "^2.0.2",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.10"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.7",
"#ionic/cli-plugin-cordova": "1.2.1",
"#ionic/cli-plugin-ionic-angular": "1.2.0",
"typescript": "~2.2.1"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "helloWorld: An Ionic project"
}

Answer 1

I'd recommend using the cordova-plugin-firebase instead. You can take a look at this repo to see how to use that plugin.
Please notice that the content of the notification sent will not be the same if the app is running in the foreground or if the app is closed when the notification arrives. In order to handle that, when sending a notification, add the title and the body in the Advanced options section: