Handling Push Notifications in Cordova

Overview

Before iOS and Android are able to receive and display push notifications, the cordova-plugin-mfp-push Cordova plug-in needs to be added to the Cordova project. Once an application has been configured, PMF-provided Notifications API can be used in order to register & unregister devices, subscribe & unsubscribe tags and handle notifications. In this tutorial, you will learn how to handle push notification in Cordova applications.

Note: Authenticated notifications are currently not supported in Cordova applications due to a defect. However a workaround is provided: each MFPPush API call can be wrapped by WLAuthorizationManager.obtainAccessToken("push.mobileclient").then( ... );. The provided sample application uses this workround.

For information about Silent or Interactive notifications in iOS, see:

• Silent notifications
• Interactive notifications

Prequisites:

• Make sure you have read the following tutorials:
  • Setting up your PMF development environment
  • Adding the PMF SDK to Cordova applications
  • Push Notifications Overview
• PMF to run locally, or a remotely running PMF
• PMF CLI installed on the developer workstation
• Cordova CLI installed on the developer workstation

Jump to

• Notifications Configuration
• Notifications API
• Handling a push notification
• Sample application

Notifications Configuration

Create a new Cordova project or use an existing one, and add one or more of the supported platforms: iOS and Android.

If the PMF Cordova SDK is not already present in the project, follow the instructions in the Adding the PMF SDK to Cordova applications tutorial.

Adding the Push plug-in

1. From a command-line window, navigate to the root of the Cordova project.

2. Add the push plug-in to by running the command:

   cordova plugin add cordova-plugin-mfp-push
   

3. Build the Cordova project by running the command:

   cordova build
   

iOS platform

The iOS platform requires an additional step.
In Xcode, enable push notifications for your application in the Capabilities screen.

Important: the bundleId selected for the application must match the AppId that you have previously created in the Apple Developer site. See the [Push Notifications Overview] tutorial.

Android platform

The Android platform requires an additional step.
In Android Studio, add the following activity to the application tag:

<activity android:name="com.ibm.mobilefirstplatform.clientsdk.android.push.api.MFPPushNotificationHandler" android:theme="@android:style/Theme.NoDisplay"/>

Notifications API

Client-side

API implementation

Initialization

Initialize the MFPPush instance.

• Required for the client application to connect to MFPPush service with the right application context.
• The API method should be called first before using any other MFPPush APIs.
• Registers the callback function to handle received push notifications.

MFPPush.initialize (
    function(successResponse) {
        alert("Successfully intialized");
        MFPPush.registerNotificationsCallback(notificationReceived);
    },
    function(failureResponse) {
        alert("Failed to initialize");
    }
);

Is push supported

Check if the device supports push notifications.

MFPPush.isPushSupported (
    function(successResponse) {
        alert("Push Supported: " + successResponse);
    },
    function(failureResponse) {
        alert("Failed to get push support status");
    }
);

Register device

Register the device to the push notifications service. If no options are required, options can be set to null.

var options = { };
MFPPush.registerDevice(
    options,
    function(successResponse) {
        alert("Successfully registered");
    },
    function(failureResponse) {
        alert("Failed to register");
    }
);

Get tags

Retrieve all the available tags from the push notification service.

MFPPush.getTags (
    function(tags) {
        alert(JSON.stringify(tags));
},
    function() {
        alert("Failed to get tags");
    }
);

Subscribe

Subscribe to desired tags.

var tags = ['sample-tag1','sample-tag2'];

MFPPush.subscribe(
    tags,
    function(tags) {
        alert("Subscribed successfully");
    },
    function() {
        alert("Failed to subscribe");
    }
);

Get subscriptions

Retrieve tags the device is currently subscribed to.

MFPPush.getSubscriptions (
    function(subscriptions) {
        alert(JSON.stringify(subscriptions));
    },
    function() {
        alert("Failed to get subscriptions");
    }
);

Unsubscribe

Unsubscribe from tags.

var tags = ['sample-tag1','sample-tag2'];

MFPPush.unsubscribe(
    tags,
    function(tags) {
        alert("Unsubscribed successfully");
    },
    function() {
        alert("Failed to unsubscribe");
    }
);

Unregister

Unregister the device from push notification service instance.

MFPPush.unregisterDevice(
    function(successResponse) {
        alert("Unregistered successfully");
    },
    function() {
        alert("Failed to unregister");
    }
);

Handling a push notification

You can handle a received push notification by operating on its response object in the registered callback function.

var notificationReceived = function(message) {
    alert(JSON.stringify(message));
};

Sample application

Click to download the Cordova project.

Note: The latest version of Google Play Services is required to be installed on any Android device for the sample to run.

Sample usage

Follow the sample’s README.md file for instructions.