Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
rpatra
Explorer
Hi Readers!

First of all, thank you very much for reading this blog. I hope it will be helpful for you.

As a Fiori developer, if you are building any Hybrid Mobile Application, Push Notification will be one of the hot features. In this Blog I am going to showcase how to integrate Google Firebase Push Notification in your Android device.

So Let's Start....

STEP 1: Hybrid Application Setup

Your system must be configured to build a hybrid mobile application. In case it's not, follow the below link to configure that.

https://evothings.com/doc/build/cordova-install-windows.html

Once the system configured, check the cordova version and cordova android version.

Cordova: 9.0.0

Cordova Android Version: 8.0.0

STEP 2: Need to create a cordova application

Use the bellow command to create a new cordova application. Remember the package name com.fiori.pushnotification this is going to be used in up-coming steps.
cordova create pushnotification com.fiori.pushnotification pushnotification

Once the application created, you can find the app in the respective directory.



These will be the default folder of that application. Now, Open the app in your cmd.
cd pushnotification

STEP 3: Need to create a project in Google Firebase Console

Now, you need to create a new Project in Google Firebase Console

1. Add a new Project



2. Give the project name



3. Enable Google Analytics for this Project - Click on Continue



4. Select your Google Account - Click on Create Project



5. Project Created Successfully.



 

STEP 4: Need to add application to the Firebase Project

1. Let's add a android app to the firebase project. Select the android Icon.



2. Use the same package name that you have used while creating cordova mobile app.



3. Download the google-services-json file.



keep the file on the same directory of your cordova project.



STEP 5: Add Cordova Android (8.0.0) Platform

Open your project in cmd and execute the below commands.
cordova platform add android

 

STEP 6: Add Cordova Firebase plugins

Now, you need to add couple of firebase plugins to the app. Use the below commands. For more information visit http://cordova-plugin-firebase-lib
cordova plugin add cordova-plugin-firebase-lib

cordova plugin add cordova-plugin-androidx
cordova plugin add cordova-plugin-androidx-adapter

Note: Remember your cordova setup must be below to install the plugins.

cordova>= 9.x.x && (cordava-android >= 8.x.x)

STEP 7: Run the cordova application

Now, you need to run the application, execute the below command.
cordova run

Once that application successfully build and deployed in your device then go to your firebase console.



Click on Next



STEP 8: Send your first Notification

1. Click on Cloud Messaging.



2. Click on Send New Message



3. Draft your first Welcome Message.



Click on Next: Select the App



4. Click Next

5. Go to Final Preview



6. Click on Publish

So, Now it all set. Enjoy your first Notification.



 

STEP 9: Capture Device Registration Token

Now, You able to trigger the Notification form Google Firebase, but how can you do the same from any endpoint. You must know the device registration token for sending any notification.

Go to www -> js -> index.js file





Write the below code onDeviceReady function.
 onDeviceReady: function() {
this.receivedEvent('deviceready');

window.FirebasePlugin.onTokenRefresh(function(token) {
// save this server-side and use it to push notifications to this device
console.log(token);
alert(token);
}, function(error) {
console.error(error);
});

},

SO, now you can able to find the unique device registration token for your device.



 

STEP 10: Send Data Message using HTTP protocol with POSTMAN

In case you doesn't have POSTMAN installed in your system, please find the below URL to add POSTMAN in your Google Chrome web browser as an add on.

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en

Once your POSTMAN is set, follow the below steps:

1. First, you have to copy Legecy Server Key from Firebase Console > Project Settings > Cloud Messaging





Note: Firebase has upgraded our server keys to a new version. You may continue to use your legacy  server key, but it is recommended that you upgrade to the newest version.

2. Now, In POSTMAN, Select POST method.

3. Enter request URL as : https://fcm.googleapis.com/fcm/send

4. Add Headers

Authorization: key=<legacy_server_key> OR Authorization: key=<server_key>and

Content-Type: application/json.



5. Now Select Body > raw > JSON (application/json) and add following code:
{
"to" : "YOUR_FCM_TOKEN_WILL_BE_HERE",
"collapse_key" : "type_a",
"notification" : {
"body" : "Body of Your Notification",
"title": "Title of Your Notification"
},
"data" : {
"body" : "BODY of your Notification in Data",
"title": "Title of Your Notification in Title",
"key_1" : "Value for key_1",
"key_2" : "Value for key_2"
}
}

6. Now You can send a Notification using POSTMAN to your registered device.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

So, Enjoy your first notification through Google Firebase Cloud Messaging Service in android device.

Thanks & Regards,

Rahul Patra

 
4 Comments
Labels in this area