Skip to Content

Enable Push Notifications in the MDK Public Store Client

test
0 %
Enable Push Notifications in the MDK Public Store Client
Details

Enable Push Notifications in the MDK Public Store Client

2020-03-23
Use the SAP Cloud Platform Mobile Services to enable push notifications in the MDK public store client.

You will learn

  • How to use MDK push register action
  • How to use predefined push configuration for the public store version of SAP Mobile Services client (MDK client)
  • How to send push notification to an MDK app

You may clone an existing metadata project from GitHub repository and start directly with step 4 in this tutorial.


Step 1: Set up the application foundation

Make sure that you have already created a new destination mobileservices_cf as per previous tutorial. This is required to connect SAP Web IDE to Mobile Services on Cloud Foundry environment and have setup initial configuration in SAP Cloud Platform Mobile Services as per this tutorial.

This step includes creating the Mobile Development Kit project in the Editor.

  1. Launch the SAP Web IDE and select the MDK perspective by clicking on the icon in the left panel.

    Right-click the workspace folder and select New | MDK Empty Project.

    MDK

    More details on MDK template is available in help documentation

  2. Enter the Project Name as mdk_push and click Next.

    MDK

    Leave the default values in Application Creation step as it is, click Finish.

    After clicking Finish, the wizard will generate your MDK project mdk_push based on your selections.

Log on to answer question
Step 2: Create MDK actions to register for push notifications

In this step, you will create the following actions:

  • Push Notification Register action: this will register the device with SAP Cloud Platform Mobile Services for push notification.

  • Message actions: these will display a message if Push Notification Register action has succeeded or failed.

  1. Create a Push Notification Register action.

    Right-click the Actions folder | New MDK Action | choose MDK Other Actions in Category | click Push Notification Register Action | Next.

    MDK

    Provide the below information:

    Property Value
    Action Name PushRegister
    MDK

    More details on Push Notification Action is available in help documentation.

    Click Next and then Finish on the confirmation step.

  2. Define a success message if the Push Register Notification action is succeeded.

    Right-click the Actions folder | New MDK Action | choose MDK Message Actions in Category | click Message Action | Next.

    MDK

    Provide the below information:

    Property Value
    Action Name PushRegisterSuccessMessage
    Type select Message
    Message Push Notification registered
    Title Success
    OKCaption OK
    OnOK --None--
    CancelCaption leave it blank
    OnCancel --None--
    MDK

    Click Next and then Finish on the confirmation step.

  3. Define a failure message if the Push Register Notification action is failed.

    Right-click the Actions folder | New MDK Action | choose MDK Message Actions in Category | click Message Action | Next.

    MDK

    Provide the below information:

    Property Value
    Action Name PushRegisterFailureMessage
    Type select Message
    Message Push Notification didn't register
    Title Failure
    OKCaption OK
    OnOK --None--
    CancelCaption leave it blank
    OnCancel --None--
    MDK

    Click Next and then Finish on the confirmation step.

  4. Define Success and Failure actions for PushRegister.action.

    In the action editor for the new action, expand the Common Action Properties and provide the below information:

    Property Value
    Success Action PushRegisterSuccessMessage.action
    Failure Action PushRegisterFailureMessage.action

    When PushRegister.action gets executed successfully then PushRegisterSuccessMessage.action will be triggered or if PushRegister.action fails then PushRegisterFailureMessage.action will be triggered.

    MDK

  5. Save the changes to the PushRegister.action.

Log on to answer question
Step 3: Call the push register action

In the step, you will set and call the Push Register Notification action when app is updated with the new metadata.

It is up to developers how they want to call a Push Register Notification action.

  1. Double-click Application.app file, select the PushRegister.action for the OnDidUpdate event.

    MDK
  2. Save the changes to Application.app file.

Log on to answer question
Step 4: Deploy and activate application

So far, you have learned how to build an MDK application in the SAP Web IDE editor. Now, we deploy this application definition to Mobile Services.

  1. Right-click the mdk_push MDK Application in the project explorer pane and select MDK Deploy and Activate.

    MDK
  2. Let the default configuration as it is and click Next.

    MDK

    Filter files: will be filtered and ignored in web packing process.

    Externals: are the list of NPM modules that are part of the MDK Client application and should not be validated in the bundle.

  3. Click the dropdown for Destination Name and select the mobileservices_cf destination, you will find list of existing application IDs, select the one you have chosen while creating the project.

    MDK

    By default, automatically deploy option is selected, In other words, the application is automatically deployed from Mobile Services to your MDK client.

  4. Click Next to finish the deployment from SAP Web IDE.

You should see Application deployed successfully message in console log.

MDK
Log on to answer question
Step 5: Assign push notification feature in app configuration
  1. Open the SAP Cloud Platform Mobile Services cockpit, click + icon to assign a new feature.

    MDK
  2. Select Mobile Push Notification, click OK.

    MDK
  3. Select SAP Mobile Services Client under Predefined for option, click Save.

    MDK

    Predefined push is supported only for the MDK (SAP Mobile Services client) public store client.

    If you want to enable push notification in your custom MDK client then follow this tutorial.

Which option is not available under Predefined for dropdown?
×
Step 6: Populate the QR code for app on-boarding

SAP Web IDE has a feature to generate QR code for app on-boarding.

  1. Right click on the mdk_push MDK Application in the project explorer pane and select MDK Deploy and Activate.

    MDK
  2. Let the default configuration as it is and click Next.

    MDK
  3. Click on QR code icon to populate QR code for app on-boarding.

    MDK
Log on to answer question
Step 7: Run MDK client

Make sure you are choosing the right device platform tab above.

On Android, the camera app does not support scanning the QR-code. As alternative you can use the Barcode scanner app to scan it.

  1. Open the Barcode scanner app and start scanning the QR code showing in SAP Web IDE.

  2. Tap Open browser. It will open SAP Mobile Services Client app.

    MDK
  3. Tap GET STARTED to connect MDK client to SAP Cloud Platform.

    MDK
  4. Enter Email address and password to login to SAP Cloud Platform and tap Log On to authenticate.

    MDK
  5. Tap AGREE on End User License Agreement.

    MDK
  6. Choose a passcode with at least 8 characters for unlocking the app and tap NEXT.

    MDK
  7. Confirm the passcode and tap DONE.

    MDK
  8. The MDK client receives deployed metadata definitions as a bundle. Click OK to confirm.

    MDK
  9. If push registration is successful, a message should show Push Notification Registered. Click OK.

    MDK

    It is time now to send the first push notification from the SAP Cloud Platform Mobile Services push notification feature.

  10. Navigate to Mobile Services cockpit. In Mobile Push Notification feature, switch to Push Registrations tab.

  11. There you will find information about user registered for push notification and also details about Push providers. Identify your Device ID and click Send Notification.

    MDK
  12. In notification dialog, type a notification message and click Send.

    MDK

You will see a success toast message.

MDK

After sending notification, mobile device should receive the message.

MDK
  1. On iPhone, open your camera app and start scanning the QR code, as shown below.

    MDK
  2. Tap the toast message to launch SAP Mobile Services Client. It will open SAP Mobile Services Client app.

  3. Tap Start to connect MDK client to SAP Cloud Platform.

    MDK
  4. Enter Email address and password to login to SAP Cloud Platform and tap Log On to authenticate.

    MDK
  5. Tap Agree on End User License Agreement.

    MDK
  6. Choose a passcode with at least 8 characters for unlocking the app and tap Next.

    MDK
  7. Confirm the passcode and tap Done.

    MDK
  8. The MDK client receives deployed metadata definitions as a bundle. Click OK to confirm.

    MDK

    You will also notice that it will first ask permission to display notifications.

    MDK
  9. If push registration is successful, a message should show Push Notification Registered. Click OK.

    MDK

    It is time now to send the first push notification from the SAP Cloud Platform Mobile Services push notification feature.

  10. Navigate to Mobile Services cockpit. In Mobile Push Notification feature, switch to Push Registrations tab.

  11. There you will find information about user registered for push notification and also details about Push providers. Identify your Device ID and click Send Notification.

    MDK
  12. In notification dialog, type a notification message and click Send.

    MDK

You will see a success toast message.

MDK

After sending notification, mobile device should receive the message.

MDK

If you have Apple watch connected to the iPhone device, you can also see same push notification on the Apple Watch.

MDK

MDK supports rich push notification. MDK does not run on smart watches or as an Apple watch application.

Log on to answer question

Next Steps

Back to top