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
