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.

Step-1

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

step-2

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

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

      });

      youralert.present();

      }

     });

      

      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.