Android > Phone Gap >> Code Snippet Views : 3555
Rate This Article :

Push Notification using Cordova and Firebase

Push notification helps to send notifications to android devices without setting up your own server!! It will be easily done by using “Firebase Cloud Messaging service”.

This article briefly explains about sending "Push notifications" to your android device using “Firebase Cloud Messaging” Service with easy steps.

Prerequisites:

Need to know about Cordova and Command Line Interface to develop android applications. If you want to know how to set up Cordova and Android SDK, please refer this article.

Firebase Cloud Messaging:

Below shown the representation about systems which are involved in sending push notifications to your android app.

FirebaseArchitecture.png

1.  Your Android App send request to Firebase server to generate unique token.

2.  Your Android App will receive token from Firebase server and it will get registered on your device.

3.  Your Android App will send the token to your server to save the firebase tokens to push notifications through firebase whenever needed.

4.   Client Server send a message to “Firebase” along with token.

5.   Firebase push messages to device.


Step 1: Creating “Android App” Project using Cordova CLI

Navigate to/create folder to create new project for this demo

$ cordova create CordovaPushApp com.android.MyCordovaPushApp CordovaPushDemo
$ cd CordovaPushApp
$ cordova platform add android


Step 2: Installing “Firebase” Push Plugin

Firebase Push plugin will allow your android application to interact with “Firebase Cloud Messaging” server by receiving unique tokens and notifications.

$ cordova plugin add cordova-plugin-firebase

Above command will add “Firebase” plugin in your project. After adding, it’s time to create project in “Firebase Cloud Messaging” system.


Step 3: Create project in FCM

1.       Go to https://console.firebase.google.com/

2.       Click on “Add Project” and create your project.

Add Project in Firebase

3.       After creating project, click on “Add Firebase to your Android App” Link present in the dashboard.

Add Firebase to your Project

4.       Write the package name of you app, it will be present in the “AndroidManifest.xml” (refer package=”xxxxx” in the manifest line) and signing certificate is Optional.

 Register App in Firebase

5.       Click on “Register App” button to register the project.

6.       Click on “Download google-services.json” file to add it in your root of the project (i.e. place where config.xml present for your project). This step is very important and your app will take information from this JSON file before interacting with Firebase.

Download google-services json

7.       Click on “Continue” button and complete the set up.


 Step 4: Register and get Firebase Token for your application

     Add “textbox” (name: txtFCMId) and 2 “buttons” in your html page and write the below lines of code in “Js” file on “Button Click” to    get the token from FCM.

1.       1st button it to register your app with firebase. (i.e. RegisterWithFCM() js method)

2.       2nd button it to receive “notifications” from firebase. (i.e. GetMessageFromGCM() JS Method)

 

function RegisterWithFCM() {

    try {

        if (window.FirebasePlugin == null) {

            alert("FCMPlugin is null")

            return;

        }

         window.FirebasePlugin.getToken(function (token) {

            //”token” received from FCM server.

            //It will get automatically registered in you device.No extra code is needed.

             alert(token);

            document.getElementById("txtGCMId").value = token;

        });

       }

catch (e) {

        alert(e);

       }

   }

 

function GetMessageFromGCM() {

    alert("onNotificationOpen");

     try {

        window.FirebasePlugin.onNotificationOpen(function (data) {

         alert(JSON.stringify(data));

        });

    } catch (e) {

        alert(e);

    }

}

You can explore different types of extension methods present in FirebasePlugin here (https://github.com/arnesson/cordova-plugin-firebase).


Step 5: Build and Install your android application

$ cordova run android

(or)

$ cordova build

Install APK file on your device and register the application using “FCM”.


Step 6: Send Notification to your application

1. Use the token received in the above step.

2. Select your Project in the FCM console.

3. Go to “Settings” and click on “Notification”. Refer below screenshot

Firebase Notification Panel

 

4. Enter “Messages”, Select “Single Device” and enter “Key” values in the “Advanced Options” and click on “Send Message”

 Push Notification From Firebase

5. You will get notification on the mobile device as below. You can send notifications using "Post man" (or) "From your Web App" to devices which are registered with FCM. It will be covered in detail in my next article.

Firebase Notification

 

   You have done it!! Now your application will get push notifications from Firebase.

About Author
Raj Kumar
Total Posts 30
Developer in .Net!
Comment this article
Name*
Email Address* (Will not be shown on this website.)
Comments*
Enter Image Text*
   
View All Comments
Rajkumar
How are you sending images in the notification Message? Try sending image URL embedded in img SRC. Let me know if any challanges.
Suresh Shivaji Thite
Hello Sir, I am going to implement push notification in cordova android app using cordova-plugin-fcm plugin. So, Notification is working but I am sending the image in notification is not working. Help me... What to do..?
  Privacy   Terms Of Use   Advertise With Us   Contact Us
© 2016 Developerin.Net. All rights reserved.
Trademarks and Article Images mentioned in this site may belongs to Microsoft and other respective trademark owners.
Articles, Tutorials and all other content offered here is for educational purpose only and its author copyrights.