Skip to Content
Author's profile photo Jamie Cawley

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.

Screen Shot 2016-03-28 at 3.32.51 PM.png

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.

Screen Shot 2015-10-12 at 11.36.09 AM.png

Next choose your desire Platforms.

Screen Shot 2015-10-12 at 11.37.29 AM.png

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.

Screen Shot 2015-10-12 at 11.40.23 AM.png

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.

IMG_1635.PNG

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

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Alex Dong
      Alex Dong

      Hi, nice blog! However, I don't have such a file called "sap-mobile-hybrid.js", is there anything I missed?

      Thanks and best regards,

      Alex

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Can you please create a post and include what steps you have taken and a screenshot of your project?

      Regards,

      Jamie

      SAP - Technology RIG

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Please post questions as a new discussion at

      http://scn.sap.com/community/developer-center/front-end/content

      Regards,

      Jamie

      SAP - Technology RIG

      Author's profile photo Pavlo Denysyuk
      Pavlo Denysyuk

      Really great blog, thanks.

      I have everything up and running concerning PUSH on IOS. Only 1 issue is present.

      processMissedNotification function receives empty notification all the time.

      Do you have some thoughts how to fix that ?

      Thanks in advance.

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      I haven't seen this issue before.  Please create a new discussion providing the versions and any debugging you have done.

      Regards,

      Jamie

      SAP - Technology RIG

      Author's profile photo Alex Dong
      Alex Dong

      Hi Jamie,

      Thanks for the reply. Now the issue is gone.

      Best regards,

      Alex

      Author's profile photo Pavlo Denysyuk
      Pavlo Denysyuk

      Jamie, I did as you suggested. Please take a look .

      PUSH payload empty while IOS hybrid app in background