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

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;


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

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


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));
      }, 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 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