ionic-firebase-push-notification
ionic-firebase-push-notification
ionic-firebase-push-notification

This lesson, we’re going to learn how to integrate firebase cloud messaging (FCM) with your ionic project. For a push notification setup we’re going to use a plugin https://github.com/arnesson/cordova-plugin-firebase

Create new ionic project or your can choose your existing project

ionic start ionPush blank
cd ionPush

Before adding platform and plugin, we need to download google-services.json from your firebase project. Login to your firebase account & choose your project, then add android platform for your firebase project.

Fill your package name & click Register App

Download google-services.json

After downloading google-services.json you need to move to root folder

!!! Important !!! Before adding plugin, we need to copy & paste your downloaded google-service.json to your project root folder; not inside src or www

Add platform, plugin and npm module

ionic cordova platform add android
ionic cordova plugin add cordova-plugin-firebase
npm install --save @ionic-native/firebase

When you build your project, it might take few mins to download dependencies & configurations.

Ionic Firebase Push Notification Code

Include firebase plugin module in app.module.ts;

app.module.ts

import { Firebase } from '@ionic-native/firebase';
.
.
.
providers: [
    StatusBar,
    SplashScreen,
    Firebase,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
 ]

we need to work with app.component.ts for registering our device with firebase server using getToken() method.

app.component.ts
import { Firebase } from '@ionic-native/firebase';
.
.
.
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, firebase: Firebase) {
    platform.ready().then(() => {
      firebase.getToken().then(token => console.log(token)).catch(err=> console.log(err));
      firebase.onNotificationOpen().subscribe(data=>{
        console.log(data);
        console.log(data.name)
      }, err=> console.log(err));
    });
  }

we created firebase object from Firebase plugin. firebase.getToken() allows your to receive pushToken for a particular app on a device. firebase.onNotificationOpen() triggers, when user clicked notification from notification bar! data is a JSON object received from server.

Sending notification from Firebase

Goto your firebase cloud messaging option, click new message & fill required details then click send message. you can also add custom data if required.

ionic-firebase-push-notification
ionic-firebase-push-notification

 

Since we written a code for displaying token and message on console. here i have attached screenshot of console

firebase-fcm-ionic-integration
firebase-fcm-ionic-integration
ionic-push-notification
ionic-push-notification

 

Sundaravel M

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+