Learn App Making
with Ionic, Cordova & Flutter.

Start Here Buy Themes

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

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

ionic start ionPush blank
cd 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 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 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