Hybrid Mobile Extension Project – Push Notifications

In my previous blog I provided an overview of the Hybrid Mobile Extension Project template which allows you to mobilize a Fiori application using the SAPUI5 extensibility concept.  In this blog we will walk through creating a Hybrid Mobile Extension Project and then adding the coding necessary to register an app with HCPms/SMP for push notifications.  If you haven’t already done so, please visit the Kapsel Push Overview which provides the configuration steps necessary for Android/iOS devices and SMP.  For HCPms app configuration visit this blog.

In this example we will use the Fiori app Approve Travel Expenses, but the same concept could be applied to any Fiori app.  Lets first start by creating the Hybrid Mobile Extension Project by selecting File -> New -> Hybrid Mobile Extension Project.  In the first step select the option Remote -> SAPUI5 ABAP Repository.  Choose your system, provide credentials if necessary and then select the Approve Travel Expenses app.  Finally choose Next and Finish to complete the process.

Let’s first start by creating a new file named notif.js in a new directory named ext and pasting in the following code which will handle the push notifications.

function registerForPush() {
  var nTypes = sap.Push.notificationType.SOUNDS | sap.Push.notificationType.ALERT | sap.Push.notificationType.BADGE;
  sap.Push.registerForNotificationTypes(nTypes, regSuccess, regFailure, processNotification, ""); //GCM Sender ID, null for APNS
}
function regSuccess(result) {
  document.addEventListener("resume", checkForNotification, false);
  console.log("Successfully registered: " + JSON.stringify(result));
}
function regFailure(errorInfo) {
  console.log("Error while registering.  " + JSON.stringify(errorInfo));
}
function unregisterForPush() {
  sap.Push.unregisterForNotificationTypes(unregCallback);
}
function unregCallback(result) {
  console.log("Successfully unregistered: " + JSON.stringify(result));
}
function processNotification(notification) {
  console.log("Received a notifcation: " + JSON.stringify(notification));
  alert("Received a notifcation: " + JSON.stringify(notification));
  if(sap.Push.isPlatformIOS()){
         sap.Push.resetBadge(resetBadgeSuccess);
  }
}
function processMissedNotification(notification) {
    if(notification){
  console.log("Received a missed notification: " + JSON.stringify(notification));
  alert("Received a missed notification: " + JSON.stringify(notification));
    }
    if(sap.Push.isPlatformIOS()){
  sap.Push.resetBadge(resetBadgeSuccess);
  }
}
function resetBadgeSuccess(result){
    console.log("Badge has been reset: " + JSON.stringify(result));
}
function checkForNotification() {
  sap.Push.checkForNotification(processMissedNotification);
}

If you are using android make sure to provide the GCM Sender ID in the registerForPush function.  Add a reference in the index.html to load the file

<script src="ext/notif.js" type="text/javascript"></script>

Now right click on the project and choose New -> Extension.  Choose the Extend Controller option and select S2 for the Controller and Empty controller for the Replace with option.  Choose Finish to complete the process.  Your project should now look like the following.

Open the S2Custom.controller.js and add the following code within the onInit function.  This code will load the notif.js file and call the registerForPush function if the plugin is selected in the device configuration.

onInit: function() {
       if(!sap.ui.Device.system.desktop){
                 registerForPush();
       }
  }

Next right click on the project and choose Project Settings -> Device Configuration.  In the Application section provide an App Name and your App ID, which you would have configured within HCPms/SMP, and a Version number.

Next choose your desire Platforms.

Finally within the Plugins Kapsel section, choose the LogonManager and Push options and your desired host HCPms/SMP providing any required information.  Save your changes when finished.

You can now right click on you project and choose Run -> Run on -> iOS Device or Android if selected in the platforms section.

On successful registration you should receive a similar popup.

To send a test notification for an HCPms configured app, utilize a rest client such as postman to send in the following values.  You can find more information regarding HCPms notifications in the help.

POST – https://hcpms.<youraccount>.hanatrial.ondemand.com/restnotification/application/com.sap.rig.pn/

Headers

Content-Type: application/json

Authorization: your notification user/password

Cache-Control: no-cache

Body

{
"alert": "alertval",
"badge": 1,
"data": "testData",
"sound": "soundval"
}

If successful you should receive a response similar to

{
  "status": {
    "value": "OK",
    "code": 0
  },
  "results": [
    {
      "status": {
        "value": "OK",
        "code": 0
      },
      "registrationId": "60c027fe-e7ea-40bd-bfe4-0b9f9bf414ca"
    }
  ]

Regards,

Jamie Cawley