Firebase is a mobile and web application platform with tools and infrastructure designed to help developers build high-quality apps. Firebase is made up of complementary features that developers can mix-and-match to fit their needs.

Firebase Cloud Messaging ( FCM ) is a cross-platform messaging solution that lets you reliably deliver message at no cost. FCM offers a broad range of messaging and capabilities (Ref: Firebase portal).

Through FCM, we can receive incoming messages in mobile devices as well as in supported browsers. It’s also possible to send messages to devices (single or multiple) and web pages via mobile or web interface. Here we are going to explain how we can send FCM message using JQuery.

1. To get started with FCM, you’ll need to Sign-in yourself in Firebase. URL: https://firebase.google.com

2. After clicking on ‘SIGN IN‘ you will redirect to Gmail’s login page. After providing your Gmail id and password, you will be redirect to Firebase welcome page.

3. You’ll need to create a Firebase Project. You can see on the Firebase welcome page ‘CREATE NEW PROJECT’ button. While creating a project, you should give it a name and accept Google terms.

4. On click ‘Create new project’ a pop up screen appears, which asks you to fill up details such as ‘Project Name’ and your ‘Country/region’. Then click on ‘CREATE PROJECT’ button.

5. After clicking on ‘CREATE PROJECT’ button, you will see firebase welcome screen where your project name appears (I have named ‘CBTech Kiosk’). Simply click on it, Firebase will automatically redirect you to the Firebase Dashboard.

6. Now we will add Firebase in our web application. You have to follow some simple steps to add firebase.

STEP 1: Click on ‘Overview’ option present in the Left Navigation bar.

STEP 2: Click on ‘Add Firebase to Your Web App’

7. Now copy the code snippet which appears after the click on ‘Add Firebase to Your Web App’ from this screen.

8. Now paste the code in the Head section of your HTML page.

9. Next in dashboard we will go through the Firebase Cloud Messaging.

STEP 1: Select ‘Project Settings’

STEP 2: Select ‘Cloud Messaging’

Server Key:  A server key that authorizes your app server for access to Google services, including sending messages via Firebase Cloud Messaging. You obtain the server key when you create your Firebase project. You can view it in the Cloud Messaging tab of the Firebase console Settings panel.

10. Here is our Great ‘sendMessageToUser’ function where we will write the basic code of sending FCM message to a particular Android device. It’s basically a JQuery POST api call to the URL ‘https://fcm.googleapis.com/fcm/send’. (How to add JQuery to your project is not in the scope of this blog)

function sendMessageToUser()
{
   $.ajax(
   {
       type : "POST",
       url : "https://fcm.googleapis.com/fcm/send",

       headers :
       {
           Authorization : "key=<YOUR SERVER KEY>"
       },

       contentType : 'application/json',
       data : JSON.stringify(
       {
           "to" : "<FCM REGISTRATION TOKEN OF THE DEVICE>",
           "data":
           {
               "action" : "set_message",
               "message" : <YOUR MESSAGE>,
               "user" : "some-user"
           }
       }),

       success : function(response)
       {
           console.log(response);
       },
       error : function(xhr, status, error)
       {
           console.log(xhr.error);
       }
   });
}

Note: Code is written at the end of the body section and it is within a script tag <script> … </script>. The main parts of the code snippet describe below:

• url: HTTP syntax used to pass message from your app server to client apps via Firebase Cloud Messaging.
• $.ajax( ) – The ajax() method is used to perform an AJAX (asynchronous HTTP) request.
• “POST” – its loads data from the server using a HTTP POST request.
• Next inside header part we have an Authorization. Where we need to put the authorization key. It is basically a “server key” that helps to authenticate the user. This key is provided by the Firebase itself.

• “to”: This parameter specifies the recipient of the message. The value can be a device’s registration token.

To get the FCM Registration Token, the Android app must be registered with the Firebase project. To add the Android app with Firebase, we need Package name and SHA-1 fingerprint of the application. Detail discussion on this available in another blog.

• Message: It basically contains the message which we want to send to a specific device as per the id provided.

That’s all. If everything goes fine, the recipient will receive a message sent from the web interface.