Js Mobile Dev About Courses Articles Youtube Services Contact

Learn how to use FCM to receive Push notifications on Ionic Framework

Libraries and Versions

Backend: Firebase v7.0.0
Frontend: @ionic/angular v5.0.0
Backend: Cordova all

FCM (or Firebase Cloud Messaging) is an excellent way to keep our users engaged with our app, and it also helps them by notifying them of important things that are happening.

We'll go through how to setup the FCM Cordova Plugin to work with your Firebase app and handle the data from arriving notifications when the user taps on it on the phone.

FCM Plugin SET UP

The first thing we need to do is install the FCM plugin:

ionic cordova plugin add cordova-plugin-fcm
npm install --save @ionic-native/fcm

Now go into your app.module.ts file and import FCM and add it to the providers array:

import { FCM } from '@ionic-native/fcm';
@NgModule({
  imports: [...],
  providers: [
    ...,
    FCM
  ]
})

Go into your Firebase Console, and you will find in the Overview section a box that lets you add a new app to Firebase, it has three choices, Android, iOS, and the web.

Add Firebase App

You are going to click on a new Android app, and it will open a dialog box like the one below, asking you for some information:

Firebase Android Dashboard

All you need to care about to get your app to work is the package name. You need to add the package name, you can find yours inside the config.xml file:

Ionic Package ID

Yours is probably something like com.ionicframework.trackmyweight7954 or something like that, please, change it, always make it a step on your checklist to replace the package name for something custom to your business.

There are too many people forget this, if you do not believe me, go to Google Play and search for com.ionicframework

Google Play Console

Once you change it, add it to the Android config box in the Firebase console, it will let you go to the next page, where you can download the config file, that is what we came here for, you are going to download the google-services.json file and place it in your projects root folder, next to files like config.xml or package.json

After you copy that file to the project it is time to do the same for iOS, you're going to add your package name, and Firebase will let you download the file, this file is called GoogleService-Info.plist. Download it and then place it right where you placed it the other one, in your projects root folder.

Ionic Framework Root Folder

Once the files are in the root folder of your project, we can move on and start coding :)

Getting the Device Token

We need to get the device token. It is a unique token that identifies the device so that FCM knows whom to send our notifications.

There are a few places where you can get the token, but for this tutorial, we'll get it on app load.

Open your app.component.ts file and import the FCM plugin

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

Inject it into the constructor:

constructor(private fcm: FCM) {}

Next thing is to find the platform ready call inside the constructor and get the token there, inside the platform.ready add:

this.fcm.getToken().then((token) => {
  // Your best bet is to here store the token on the user's profile on the
  // Firebase database, so that when you want to send notifications to this
  // specific user you can do it from Cloud Functions.
});

We're using the .getToken() function of the FCMPlugin, it will return a promise with the token for that device, then inside of that promise you can pass that token to Firebase so we can make sure it is in the database when the Cloud Function tries to read it to send the notification.

Now that we have the device token, we need to handle the incoming notifications, and the idea is that we place the function in a file that's always getting called on startup, that way we can call that function when the user enters the app through the notification.

For that, we are going to set it in the app.component.ts file, so let's break down the process of that we will do:

  • We will receive the notification.
  • Then the plugin will check if the notification has a property called tapped and that is equal to true or false.
  • If it is false it means that the app was in the foreground (meaning the user was inside the app at that moment)
  • If it is true it means the user tapped the notification from the notification tray and that's how he opened the app.
  • We're also going to receive a profile ID on the notification, this as an example, let's say you have a list of bird profiles and the notification has the ID of one of them when you tap the notification we want to go directly to that page.

We are going to set the notification listener. The FCMPlugin has a function called .onNotification that returns a Promise carrying the notification data.

Since we're using Ionic Native we can subscribe to that response:

constructor(..., private fcm: FCM) {
  ...
  ...
  ...

  platform.ready().then(() => {
    fcm.onNotification().subscribe( data => {
      if(data.wasTapped){
        //Notification was received on device tray and tapped by the user.
      }else{
        //Notification was received in foreground. Maybe the user needs to be notified.
      }
    });
  });
}

We are running it inside platform.ready() because it is a cordova plugin, we need to make sure the device is ready before calling it, or it will crash. The plugin is listening for notifications, and when it finds one, it returns its data as a promise.

Then we ask if the data has a property called wasTapped and if that property is true if it is, the app was in the background and the user tapped the notification to get in.

If it is false, it means the user was using the app, in both cases, we are going to send the user to the DetailPage.

I am going to do the push in one line, but I want to leave a little challenge for you (don't worry, it is an easy one).

Check when the user is in the foreground, meaning he is using the app and notify them that you are taking them there before navigating.

fcm.onNotification().subscribe((data) => {
  if (data.wasTapped) {
    //Notification was received on device tray and tapped by the user.
    console.log(JSON.stringify(data));
    this.router.navigateByUrl(`detail/${data.profileId}`);
  } else {
    //Notification was received in foreground. Maybe the user needs to be notified.
    // Here you should add an alert or something that let's the user know
    // you're about to take them to another page
    this.router.navigateByUrl(`detail/${data.profileId}`);
  }
});

And there you have it. The notification system is ready to be used, and now we need to start sending notifications, you can test your notifications from a test server created by the plugin creator, it is kind of cool.


Become a Mobile Developer using JavaScript

Leave your email below and you'll get one or two emails a month sharing articles, videos, or courses that will help you jump-start your development with Ionic, Firebase, and Angular 🚀.

    I don't do the spam thing, you can one-click unsubscribe at any time