5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

Community

Ask a Question Write a Blog Post Login

Technical Articles

Rahul Patra
November 28, 2019 5 minute read

SAP UI5 Push Noti cation using Cordova and Google

Firebase – Android
3 Likes 765 Views 4 Comments

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 Noti cation will be one of the
hot features. In this Blog I am going to showcase how to integrate Google Firebase Push Noti cation in your
Android device.

So Let’s Start….

STEP 1: Hybrid Application Setup

Your system must be con gured to build a hybrid mobile application. In case it’s not, follow the below link to
con gure that.

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

Once the system con gured, 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. ori.pushnoti cation this is going to be used in up-coming steps.

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 1/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

cordova create pushnotification com.fiori.pushnotification pushnotification

Once the application created, you can nd 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

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 2/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

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

4. Select your Google Account – Click on Create Project

5. Project Created Successfully.

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 3/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

STEP 4: Need to add application to the Firebase Project

1. Let’s add a android app to the rebase project. Select the android Icon.

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

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 4/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

3. Download the google-services-json le.

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 5/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

keep the le 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

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 6/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

STEP 6: Add Cordova Firebase plugins

Now, you need to add couple of rebase plugins to the app. Use the below commands. For more information
visit http://cordova-plugin- rebase-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 rebase console.

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 7/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Click on Next
Follow RSS feed Like

STEP 8: Send your rst Noti cation

1. Click on Cloud Messaging.

2. Click on Send New Message

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 8/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

3. Draft your rst Welcome Message.

Follow RSS feed Like

Click on Next: Select the App

4. Click Next

5. Go to Final Preview

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 9/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

6. Click on Publish

So, Now it all set. Enjoy your rst Noti cation.

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 10/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

STEP 9: Capture Device Registration Token

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

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

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 11/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

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 nd the unique device registration token for your device.

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 12/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 13/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

STEP 10: Send Data Message using HTTP protocol with POSTMAN
Follow RSS feed Like

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

https://chrome.google.com/webstore/detail/postman/fhbjgbi injbdggehcddcbncdddomop?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.

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 14/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Follow RSS feed Like

Alert Moderator

5. Now Select Body > raw > JSON (application/json) and add following code:

Assigned tags
{
"to"| : SAP
SAPUI5 "YOUR_FCM_TOKEN_WILL_BE_HERE",
Cloud Platform | SAP Fiori |
"collapse_key" : "type_a",
"notification" : {
"body"
Related Blog : "Body of Your Notification",
Posts
"title": "Title of Your Notification"
},
How to debug UI5 application packaged into a mobile device via Cordova with a custom plugin
"data" : {
By Jerry Wang , Aug 18, 2017
"body" : "BODY of your Notification in Data",
Phonegap + OpenUI5 = App published on Play store [Packaging SAPUI5 application]
"title": "Title of Your Notification in Title",
By Former Member , Dec 01, 2014
"key_1" : "Value for key_1",
Step by step to package a Fiori application into your Android device using Cordova
"key_2" : "Value for key_2"
By Jerry Wang , Aug 17, 2017
}
}

Related Questions
6. Now You can send a Noti cation using POSTMAN to your registered device.

—————————————————————————————————————————————————————
Not able to send push noti cations to individual user mobile app without IDP
————————————————————————————————————-
By Former Member , Nov 04, 2016

Push noti cation using UI5

So, Enjoy your rst noti cation through Google Firebase Cloud Messaging Service in android device.
By Ashwin Katkar , Feb 15, 2016
Push noti cation using sap ui5 framework
Thanks & Regards,
By SAP Fiori , Dec 11, 2019

Rahul Patra

4 Comments

You must be Logged on to comment or reply to a post.

Enric Castella Gonzalez

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 15/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

November 28, 2019 at 7:18 am

Follow
Great and usefull! RSS feed Like

Like(1)

Hemalatha Bharanikumar

November 28, 2019 at 7:50 am

Very helpful

Like(1)

Praveer Sen

December 17, 2019 at 6:23 pm

Very informative.

Thanks for sharing.

Happy learning

Praveer

Like(0)

SAP Fiori

January 8, 2020 at 10:41 am

Nice Rahul for such a nice blog.

Do you know if we can achieve the same for ios device?

Thank you!

Like(0)

Find us on

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 16/17
5/7/2020 SAP UI5 Push Notification using Cordova and Google Firebase – Android | SAP Blogs

Privacy Terms of Use

Follow RSS feed Like
Legal Disclosure Copyright

Trademark Preferencias sobre cookies

Newsletter Support

https://blogs.sap.com/2019/11/28/sap-ui5-push-notification-using-google-firebase-android/ 17/17