Sampath
Sampath

Reputation: 65870

Push notification is not working on Background

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"
}

Upvotes: 4

Views: 3204

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

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:

enter image description here

Upvotes: 3

Related Questions