Ionic Firebase Push Notification Tutorial

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 http://github.com/arnesson/cordova-plugin-firebase

Create a new ionic project or you can choose your existing project

ionic <span class="hljs-built_in">start</span> ionPush blank
<span class="hljs-built_in">cd</span> ionPush

Before adding the platform and plugin, we need to download google-services.json from your firebase project. Login to your firebase account & choose your project, then add an 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 the root folder

!!! Important !!! Before adding a 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 <span class="hljs-keyword">add</span><span class="bash"> android
</span>ionic cordova plugin <span class="hljs-keyword">add</span><span class="bash"> cordova-plugin-firebase
</span>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

<span class="hljs-keyword">import</span> { Firebase } from <span class="hljs-string">'@ionic-native/firebase'</span>;
.
.
.
<span class="hljs-string">providers:</span> [
    StatusBar,
    SplashScreen,
    Firebase,
    {<span class="hljs-string">provide:</span> ErrorHandler, <span class="hljs-string">useClass:</span> IonicErrorHandler}
  ]

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

app.component.ts

import <span class="hljs-comment">{ Firebase }</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'@ionic-native/firebase'</span>;
.
.
.
<span class="hljs-function"><span class="hljs-keyword">constructor</span><span class="hljs-params">(<span class="hljs-keyword">platform</span>: <span class="hljs-keyword">Platform</span>, statusBar: StatusBar, splashScreen: SplashScreen, firebase: Firebase)</span> <span class="hljs-comment">{
    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)
      }</span>, <span class="hljs-title">err</span>=> <span class="hljs-title">console</span>.<span class="hljs-title">log</span><span class="hljs-params">(err)</span>);</span>
    });
  }

we created a firebase object from Firebase plugin.firebase.getToken() allows you 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 the 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.

Since we wrote code for displaying token and message on the console. here I have attached screenshot of console