Header Ads

Push Notification in Ionic 3

Push Notification with Firebase

Push Notification allows the developer to notify the all user at any time, a user has an app will receive them. push Notification can be implemented in (android, ios, windows) with ionic Push plugin.

Firebase Cloud messaging

Firebase is used to create a device token and server key, Go to firebase console, create a new project and select the setting.
In that project, a user gets the sender Id and server key to set push notification.


Goto project setting, and Add firebase to android app, To register an Android app, copy the package name in config.xml and set it. 


Download the google-service.JSON file and move the google-service.JSON into the app-module project directory and click finish.

Install Push plugin

Install ionic native push plugin, for register and receiving notification. replace the sender-id with the push option in SENDER-ID. 

    ionic cordova plugin add phonegap-plugin-push --variable SENDER-ID=xxxxx
    npm install --save @ionic-native/push

Import the push plugin in app-module and then use it in app-component.

  import { Push, PushObject, PushOptions } from '@ionic-native/push';
     const options: PushOptions = {
         android: {
             senderID: 'xxxxxxxxx'
         ios: {
             alert: 'true',
             badge: true,
             sound: 'false'
         windows: {},

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

      pushObject.on('notification').subscribe((notification: any) => {
      if (notification.additionalData.foreground) {
      let youralert = this.alertCtrl.create({
        title: 'New Push notification',
        message: notification.message
      pushObject.on('registration').subscribe((registration: any) => console.log('Device registered',      registration));

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

Now test the push Plugin, by push sample message from firebase and notification display in mobile.
when opening it, it displays in the app.

Post a Comment