Ionic 7 Firebase FCM Push Notification Tutorial with Example

Last Updated on by in Ionic
In this Ionic Angular Firebase push notification tutorial, we will learn how to create and send push notifications from Firebase Cloud Messaging to Ionic Angular application using Ionic native and Cordova FCM plugin from scratch.A push notification is a message that shows up on a user’s mobile device. App owners can publish push notification at any time and send it to the user’s device.

Push notifications seem similar to SMS or text messages and mobile alerts. However, they only received by users who have installed your app. Almost every mobile platform supports push notifications such as iOS, Android, Fire OS, Windows, and BlackBerry.

Push notifications provide you updates, be it:

  • Latest offers to boost sales
  • Latest sports scores and news
  • Reports about traffic and weather
  • Flight check-in, change, and connection information


To get started with this Ionic push notification tutorial, we must have the following tools, frameworks, and packages in our arsenal.

  • Latest Node
  • Ionic
  • Angular
  • Firebase FCM
  • Postman
  • Text Editor
  • Cordova
  • Ionic Cordova Native FCM

If you do not have Node.js installed on your device then follow this tutorial on: How to Download and Install Node.js and npm

Firebase Setup for Android

To set up Firebase for Android, head over to and create a Firebase project.

Firebase FCM Setup for Android

Next, a full-screen pop up appears on your screen, enter your project name in the input field and click on the continue button.

push notification in ionic

In the second screen, you will see Google analytics features you can enable them and click on the create project button.

Firebase Google Analytics Feautes

In the dashboard, you will have options to set up Firebase account for iOS, Android, Web, and Unity. Click on the Android button, and you will be redirected to the given screen.

Firebase Dashboard

Next, we will add Firebase to our Android app.

To register the app add the Android package name in the input field. For instance, we entered com.positronx.pushnotification then provided the app’s nickname (same as Ionic project name); however, its an optional value. Then click on the Register app button.

Next, you will see the following screen that allows you to Download the config file, which is used to run the mobile app in the Android Studio or emulator.

Click on the Download google-services.json file. We have to add this file to the based folder of our Ionic app.

Download Google Services JSON File

Click on the next button unless you reach to the last screen that can be skipped.

Run your app to verify installation

We have successfully created the Firebase application for Android platform.

Firebase application for Android platform

Create Ionic Push Notification App

Make sure you have the latest version of Ionic CLI and Cordova installed on your machine, use below command to install Ionic CLI globally your machine:

sudo npm install -g @ionic/cli

Check out the version of Ionic by running the following command.

ionic -v

Run the following command to create a brand new blank Ionic Firebase push notification app.

ionic start ionic-firebase-push-notification blank --type=angular 

Get inside the project folder.

cd ionic-firebase-push-notification

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,

Run the following command in the terminal to install the lab plugin as a dev dependency.

npm install --save-dev @ionic/lab --legacy-peer-deps

Ionic Firebase FCM Push Notification Example

Install & Configure Ionic Cordova Native FCM Plugin

Now, we type the below command in the terminal to Install Google Firebase Cloud Messaging Cordova Push Plugin and Ionic Native FCM plugins.

npm i cordova-plugin-fcm-with-dependecy-updated@7.5.0 --legacy-peer-deps
npm install @ionic-native/fcm --legacy-peer-deps

FCM offers basic functionality for Firebase Cloud Messaging (FCM) and It supports iOS and Android.

Open your Ionic project and head over to the config.xml file. Here you can see the widget id “com.positronx.pushnotification” that carries the unique identification of your push notification app, here you have to add the package name that we defined in the Firebase.

Firebase Widget ID in config.xml

This time we will inject FCM service to enable the Push notification service in our Ionic app via Firebase FCM.

Go to app.module.ts file and add the following code in the main app module file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// import FCM
import { FCM } from '@ionic-native/fcm/ngx';

  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy,
  bootstrap: [AppComponent],

export class AppModule {}

We imported FCM plugin and register in the providers array.

Push Notification Implementation in Ionic

Now, we will implement push notification in our Ionic Cordova app through Firebase Cloud Messaging.

Head over to command prompt type following commands and commence installing SplashScreen and StatusBar plugins.

npm i cordova-plugin-splashscreen --legacy-peer-deps
npm install @ionic-native/splash-screen --legacy-peer-deps
npm i cordova-plugin-statusbar --legacy-peer-deps
npm install @ionic-native/status-bar --legacy-peer-deps

Place the following code in the app.component.ts file.

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { FCM } from '@ionic-native/fcm/ngx';

  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],

export class AppComponent {
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcm: FCM
  ) {

  initializeApp() {
    this.platform.ready().then(() => {

      // subscribe to a topic
      // this.fcm.subscribeToTopic('Deals');

      // get FCM token
      this.fcm.getToken().then((token) => {

      // ionic push notification example
      this.fcm.onNotification().subscribe((data) => {
        if (data.wasTapped) {
          console.log('Received in background');
        } else {
          console.log('Received in foreground');

      // refresh the FCM token
      this.fcm.onTokenRefresh().subscribe((token) => {

      // unsubscribe from a topic
      // this.fcm.unsubscribeFromTopic('offers');

We imported FCM API from ‘@ionic-native/fcm/ngx’ and Router from ‘@angular/router’.

Inject FCM and Router services in the constructor.

We can access to subscribeToTopic method via FCM package and subscribe to a topic, the subscribeToTopic() takes the topic name as a parameter.

The fcm.getToken() method returns a token of a push notification, and we are showing the token in the console.

The fcm.onNotification() method returns a push notification from Firebase Cloud Messaging.

The fcm.onTokenRefresh() method allows refreshing the Firebase Cloud Messaging (FCM) token.

Use unsubscribeFromTopic() method to unsubscribe from a topic from FCM.

Sending and Receiving Push Notification in Ionic via FCM

In this step, we will create the project build; let’s run the below command to add the Android platform in Ionic app.

ionic cordova platform add android

In this step, we will add the google-services.json in the root of our project and also inside the platform/android folder file that we downloaded from Firebase FCM. This step is crucial, and it makes communication between the Ionic app and Firebase.

Add google-services.json in Ionic

Run the Ionic app in the Android device by using the following command.

ionic cordova run android --livereload

We used the --livereload tag. It automatically creates the build as soon as it noticed any change in the application files.

Firebase Cloud Messaging Example

Go to your Firebase dashboard click on Grow > Cloud Messaging, we define Firebase Notification here, add the notification title, text even you can pass the notification image here.

Click on the ‘Send test message’ button, and it will open a popup where you have to define the Firebase Cloud Messaging token to send push notification to the Ionic app.

Ionic Firebase Send Push Notification Example

Type chrome://inspect in the address bar, then select the inspect mode there you can see the Firebase push notification token that we will need in the next step.

FCM notification token

We have done all the formalities, and now we will hit on the Test button to send a test notification.

Sending and Receiving Push Notification in Ionic


In this tutorial, we have learned how to send push notifications from Firebase and receive notification in an Ionic app.

The Ionic Firebase FCM Push Notification Tutorial is over.

Digamber - Author

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.