SAPUI5, SAP Cloud Platform, SAP Fiori

SAP UI5 Push Notification using Cordova and Google Firebase – Android

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.

Also Read: SAP Fiori System Administration Certification Preparation Guide

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.

Leave a Reply

Your email address will not be published. Required fields are marked *