ionic 2+ push notification with firebase

Posted on Posted in Beginner

In this tutorial, we are going to learn how to add Firebase (FCM) push notification to ionic 2+ application using Firebase Cloud Messaging. From all indication this is one of the onerous task in ionic app development, but I promise this is a practical step by step approach

 




To achieve our task of the day, we need to do the following

  1. Create new ionic app called fcmIonicApp
  2. Install the Cordova and Ionic Native plugins
  3. Add FCM plugin to the app module
  4. Register your app with Firebase
  5. Configure the app to receive token and push notifications
  6. Test your app.

 

  1. Create new ionic app called fcmIonicApp

Change to command prompt and type the code below to create an app in ionic

                ionic start fcmIonicApp blank

for more information on creating an ionic app, read my earlier post on Create you first mobile app with ionic 2+




  1. Install the Cordova and Ionic Native plugins:

While you are still in command prompt, change directory to fcmIonicApp issue the following commands in sequence as shown below

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

 npm install –save @ionic-native/fcm

 

ionicdon - FCM

3.  Add fcm plugin to the app module

Open app.module.ts file, add import { FCM } from ‘@ionic-native/fcm’; and add FCM to the lists of providers as shown below

ionicdon - FCM




4.   Register your app with Firebase

Go to firebase website HERE  to create a project, to achieve this you might need to create a Google account or login with your Google account credentials.

 

You need to create a project by clicking add project button

ionicdon - FCM

From add project popup window, give your project a name and check the two terms and agreements checkboxes and click create project button as shown below

ionicdon - FCM




You will be prompted with the below image when the project created is ready, click continue button

ionicdon - FCM

 

At the welcome page, click add app, then click add firebase to your android app.

ionicdon - FCM




add android package name under register app in my case my app is com.ionicdon.fcmIonicApp then click Register App  button as shown below

note that this app name is going to be used to modify config.xml file (Step 5)

ionicdon - FCM

 

After the app is registered, you will be prompted to download config file, click download google-services.json button as shown below.

Note the download location and click next button

ionicdon - FCM

 




5.  Configure app to receive token and push notifications.

The next step is to configure our app to receive token and push notifications, to achieve this we need to do the following

  1. Modify app.components.ts file to receive token and push notification
  2. Add the downloaded google.services.json file to the root directory of our app
  3. Modify config.xml file in line with the firebase settings

Open app.components.ts file, add the following code to receive token refresh, note that this callback will be fired everytime a new token is generated, including the first time.

FCMPlugin.onTokenRefresh(function(token){

    alert( token );

});

To get token, add the following code

FCMPlugin.getToken(function(token){

    alert(token);

});

To receive push notification, add the following code

FCMPlugin.onNotification(function(data){

    if(data.wasTapped){

      //Notification was received on device tray and tapped by the user.

      alert( JSON.stringify(data) );

    }else{

      //Notification was received in foreground. Maybe the user needs to be notified.

      alert( JSON.stringify(data) );

    }

});

At the end your app.components.ts file will look like what I have below

ionicdon - FCM




b.   Add the downloaded google.services.json file to the root directory of our app

Copy downloaded google.services.json file from step 4 and paste it in the root of your app folder, as shown below

ionicdon- FCM

c       Modify config.xml in line with firebase registration

Open config.xml file, change the widget ID to the app name registered during Firebase App registration, in my own case the app name is com.ionicdon.fcmionicapp, hence, config.xml will be modify to reflect what we have below

ionicdon - FCM




6.      Test your app.

If you have follow up to this moment, I congratulate for your tenacity, well done, now it is time to test our app, but wait a minute, testing our app this time is going to be different in the sense that cordova plugin does not run on browsers, so you need to run the app on an emulator or on a physical device.

To run our app on an Android Virtual Device (AVD), you will need to issue the following command in sequence

ionic cordova platform add android

ionic cordova emulate android

 

b.         Head to Firebase console, to send a test message as shown below , after all the necessary fields are filled, click on send message button

ionicdon - FCM

Review your message and click send button

ionicdon - FCM

when the message is sent, it will be indicated in the message dashboard with the status indicating delivered as shown below

ionicdon - FCM

check your Android Virtual Device (AVD) or your physical device for the message sent.

Cool!!! isn’t it?

 

if you find the tutorial useful, don’t forget to bless others by sharing it




 

Find source code at Github

2 thoughts on “ionic 2+ push notification with firebase

  1. Hmm it seems like your site ate my first comment (it was super long) so I guess I’ll just sum it up what I wrote and say, I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to everything. Do you have any tips and hints for inexperienced blog writers? I’d definitely appreciate it.

Leave a Reply

Your email address will not be published. Required fields are marked *