Send Push Notification to Ionic 5 Native app with Firebase Cloud Messaging (FCM)

8 min readAug 3, 2023

Steps to send Push Notification to Ionic App using Firebase Cloud Messaging service. We will use Ionic 5 Cordova Native FCM plugin to receive push notification in an Ionic app.

A push notification is a message similar to SMS and shows up on a mobile device with title, text & image, however they only received by the users who have installed your app.
Almost every mobile platform supports push notifications such as iOS, Android, Fire OS, Windows, and BlackBerry.
App owner can publish & send push notifications anytime to the users device directly from the Firebase Cloud Messaging Panel or Using the Google FCM APIs.

Push Notification uses?

1. Latest offer information to boost sales.
2. Order confirmation & delivery status.
3. Latest sports score and news.
4. Reports about traffic and weather.
5. Travel check-in, change, and connection information.

Prerequisite

Before start — Configure Development Environment.

You must have latest Node, NPM and Angular CLI configured on your system.
Skip this step, If you have already configured otherwise follow the below link to set up Node, NPM and Angular CLI on your device.
Link to → Setup Developer Environment.
Rest we’ll use Postman to call APIs| Text Editor (Preference: VS Code)
and Ionic 5 Cordova Native FCM Plugin.

Firebase Setup for Android

To set up Firebase for sending push notifications to Android devices, head over to console.firebase.google.com and create a Firebase project.

Enter your project name in the input field and click on the continue button. “Shopping List Maker” is my Project name.
In the second screen, you will see Google analytics features you can enable them and click on the create project button.
Next, In the dashboard, you will have options to set up Firebase account for iOS, Android, Web, and Unity. Click over the Android icon button.

Next, To register the Android App

Add the Android package name in the input field.
For example, we entered shoplim.codechintan.com
Then provide the app’s nickname (same as Ionic project name)
Example: ShopLiM
Then click on the Register app button.

4. Next screen you will see to Download the config file.
Click on the button to Download google-services.json file. We’ll add this file to the root folder of our Ionic app.

5. Click on the next button unless you reach to the last screen that can be skipped. Then click over Continue to console button.

We have successfully created the Firebase application for Android platform.

Make sure you have the latest version of Ionic CLI and Cordova globally installed on your device, if not use the below command.

sudo npm install -g cordova ionic

Check out Ionic version by running the following command.

ionic -v

To update Ionic and Cordova run following command.

sudo npm update -g cordova ionic

Now, Create new Ionic App —

(You may use your existing app — if you already have one)

To create new, run the below command:

ionic start your-project-name blank

See this link↓ to start Ionic project with other templates.
https://ionicframework.com/docs/cli/commands/start

2. Head over to the project folder by using the following command:

cd your-project-name

Run below↓ command to start the app in the browser.

ionic serve

Install & Configure Ionic 5 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 plugin.

ionic cordova plugin add cordova-plugin-fcm-with-dependecy-updated

FCM plugin offers basic functionality for Firebase Cloud Messaging (FCM) and It supports iOS and Android. Run below↓ command in the terminal.

npm install @ionic-native/fcm

Next,

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

Package name “**shoplim.codechintan.com**”

Add package name in the `config.xml` file.

Inject FCM service to enable Push notification service.

Open app.module.ts file and add the following code:

// file: app.module.ts// import FCM Plugin
import { FCM } from '@ionic-native/fcm/ngx';// register FCM in the providers array
providers: [
  AppVersion,
  StatusBar,
  SplashScreen,
  AngularFirestore,
  FCM
],

Now, to receive Push Notification in the app, add following code in the app.component.ts file.

// file: app.component.tsimport { 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';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})

export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private fcm: FCM
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // subscribe to a topic
      // subscribeToTopic() takes the topic name as a parameter.
      this.fcm.subscribeToTopic('offers');

      // get FCM token
      // getToken() method returns a token of a push notification, 
      // token used to send push notification
      this.fcm.getToken().then(token => {
        console.log(token);
      });

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

      // refresh the FCM token
      // onTokenRefresh() method allows refreshing the FCM token
      this.fcm.onTokenRefresh().subscribe(token => {
        console.log(token);
      });

      // unsubscribe from a FCM topic to stop receive messages
      this.fcm.unsubscribeFromTopic('offers');

    });
  }
}

Add Android platform in the Ionic App

Let’s run the below↓ command to add the Android platform in Ionic app.

ionic cordova platform add android

Add the google-services.json file in the root of our project and also inside the platform/android folder.
File google-services.json is the file that we downloaded from Firebase FCM.
OR
Go to Firebase Console → Your Project → Project Setting → Download google-services.json file.
*This step is crucial, and it makes communication between the Ionic App and Firebase.

Add the **google-services.json** file inside the **platform/android** folder.

Also add the **google-services.json** file in the root of our project.

Next, Build the Ionic app for Android

Run the below↓ command to build the Android APK.

[Note: You may face this error: “Unable to merge dex in Ionic”
To fix this error: Follow this link]

ionic cordova build android

The above↑ command will generate Android APK — next, install this APK in the actual Android device to receive notification message.

*Firebase Cloud Messaging Example

Go to Firebase Console dashboard → Your Project → click on Grow → Cloud Messaging → Add the notification title, text even you can pass the notification image here. Look below↓

Click over Next → Next → Next → Review → Publish

Once you Publish notification — You will receive a notification in your phone.
Like this ↓

*Firebase Cloud Messaging APIs Example

The same push notification can be sent by API — for two primary reasons.
1. To send notification from the code using HTTP POST REQUST by calling API URL with required parameters.
2. To send notification to a particular user — identify them by their FCM token. For that we will need a FCM token for a user which is unique for each user.

Get FCM token using this code:
(The below↓ code is already added in app.component.ts file.)

// get FCM token
// getToken() method returns a token of a push notification, 
// token used to send push notification
this.fcm.getToken().then(token => {
   console.log(token);
});

We can find this token in the browser console like shown in below↓ image by debugging our Ionic app.
(Later you may save this token for a user in the database to sent them notifications.)

To do that open URL chrome://inspect/#devices on your browser like this↓ then click over inspect to debug your Ionic app.

You must see the token string we print in console in app.component.ts file. Look token is highlighted in below↓ image.

In the console **token** is highlighted.

Copy and keep this token — we will use this token to send push notification to a user.

Add an **Authorization** key — required to send push notification using FCM API.

You’ll get your authorization key from Firebase Console.
Go to Firebase Console → Your Project → Project Setting → Cloud Messaging
Look key is highlighted in below↓ image.

*Finally send Push notification using FCM API

Look notification parameters are highlighted in below↓ image.
Parameters to be passed are title, body and to (to which is a token we get from a mobile phone device — this token is unique from each user.)
POST URL: https://fcm.googleapis.com/fcm/send

At the bottom part of image we get the confirmation details for the notification we sent to a device.

The same Push notification will be received in your phone. Like this ↓

Done! 🤩 It’s that simple to Send Push Notification to Ionic5/Ionic-Native app with Firebase Cloud Messaging (FCM).

See you later 👋👋

Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)
Stay connected for more articles:
https://medium.com/@AnkitMaheshwariIn

If you wouldn’t mind giving it some claps 👏 👏 since it helped, I’d greatly appreciate it :) Help others find the article, so it can help them!

Always be clapping…

*This step is crucial, and it makes communication between the Ionic App and Firebase.