Push Notification Using FCM (Firebase Cloud Messaging)

Push Notification Using FCM
Push Notification Using FCM

A Notification is required in our daily routine life. Moreover, getting it from a mobile device is also required in today’s busy life. There are two types of such notifications.

  • Local notification: These are the notifications which can be run locally from your mobile device only. Mainly when your application is running in front, that time these notifications are used.
  • Push notifications: These are the notifications which are called from the server even if your application is not running.

Using push notifications we can achieve many things like live score, events, news etc

Push Notifications:

Push notifications is same as SMS text messages and mobile alerts, these messages and notifications can get by users who have installed the respective application in their mobile these can be used as reminder and notifications about the new thing in an application.

Let’s talk about how to integrate this very useful feature in ionic. There are certain prerequisites that need to be fulfilled before moving ahead.

Need for Push Notification 

  • FCM Account
  • Sender Id 
  • App Id 
  • PhoneGap Push Plugin

Above mentioned first 3 requisites can get from the FCM. It is the service provided by google for sending messages to the mobile devices.

Configure FCM

Steps:

  • Go to Google FCM (Firebase Cloud Message) https://console.firebase.google.com  
  • Create New Project 
  • Goto Project Setting > Cloud Messaging   
  • Copy Sender Id and ServerKey 

Configure Ionic

We will be going to use ionic IO for this article for showing push notification in action. For that, you will need to have an account on ionic io. Don’t worry it's free. You can create a free account on it and follow the below-mentioned steps for creating an application and getting appid and server key for push notifications.
    
Steps:

  • $ Ionic io init  Enter credentials of https://apps.ionic.io/ ( this will create your application in ionic io )
  • Go to the apps.ionic.io there you can see the application already created and from there you can get appid; from there go to setting and configure server Key
  • Go to Setting >  Certificates > New Security Profile Create new Profile  
  • Edit app select Android/ IOS
  • Add  Server key from FCM and Save  

Plugin Installation

Now let’s add push notification plugin in our application using below command:

$ cordova plugin add phonegap-plugin-push --variable SENDER_ID=12341234 --save

$ npm install --save @ionic-native/push

Here, Set Sender Id Variable from FCM (Firebase Cloud Message) and it will configure the id in config.xml file 

Example :

In app.module.ts file

import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'APP_ID'
  },
  'push': {
    'sender_id': 'SENDER_ID',
    'pluginConfig': {
      'ios': {
        'badge': true,
        'sound': true
      },
      'android': {
        'iconColor': '#343434'
      }
    }
  }
};
@NgModule({
  declarations: [
    MyApp
  ],
  imports: [IonicModule.forRoot(MyApp),
  CloudModule.forRoot(cloudSettings)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
      ],
  providers: [
    StatusBar,
    SplashScreen, 
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Here, You will set Sender_id and app_id in cloud configure and configure CloudSetting  in forRoot() function 

   
In app.component.ts file 

import {Push, PushToken} from '@ionic/cloud-angular';

export class MyApp {

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, public push: Push) {
    this.initializeApp(); 
}


  initializeApp() {
    
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      });

    this.push.register().then((t: PushToken) => {
        return this.push.saveToken(t);
      }).then((t: PushToken) => {
        console.log('Token saved:', t.token);
      });

      this.push.rx.notification()
      .subscribe((msg) => {
        alert(msg.title + ': ' + msg.text);
      });

  }
}

Here, register your notifications using this.push.register() and it will return push token and message. For testing purpose, you can follow below steps for getting notifications on your device.

  • Go to https://apps.ionic.io/  
  • In setting go to Push > Create New Push 
  • Create new Message for notification and Send   

Hope this helps you well, feel free to add your comments/feedbacks and need more assistance regarding hybrid app development, be in touch.