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.


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.


Post a Comment

5 Comments