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 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;


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 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.



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



Please login to download source code Login Here
Sundaravel M

About the author: Hi! I'm Sundaravel (codesundar), Founder of I have been a Web, Mobile App developer, Author, and Teacher since 2014. I also worked as a software consultant for fortune 500 companies. I created to share my real-time knowledge in various technologies such as PhoneGap, Ionic, Flutter and more.