Customizing Cordova plugin

Push notifications in the foreground

When receiving a push in the background, no events are triggered until a push notification is clicked. After it is opened, the Pushwoosh plugin fires push-receive and push-notificationevents.

When a push is received in the foreground, the plugin fires push-receive automatically. By default, it also displays a foreground notification. When the user opens it, the plugin fires push-notification.

You can listen to push-receive event to immediately react on a push in case it is received in the foreground, e.g. update content on a current page in your app. push-notification, on the other side, is used to react to a notification click event, which requires user interaction, e.g. to navigate within your app, trigger a new process in your app, etc.

By default, the plugin displays foreground notifications on both iOS and Android. To change this, set the IOS_FOREGROUND_ALERT_TYPE and ANDROID_FOREGROUND_PUSH variables when you install the plugin:

IOS_FOREGROUND_ALERT_TYPE

ALERT – display foreground notifications (default)
NONE – hide foreground notifications

Any value other than NONE, including BANNER, works the same way as ALERT.

ANDROID_FOREGROUND_PUSH

true – display foreground notifications (default)
false – hide foreground notifications

Example that hides foreground notifications on both platforms:

cordova plugin add pushwoosh-cordova-plugin --variable IOS_FOREGROUND_ALERT_TYPE="NONE" --variable ANDROID_FOREGROUND_PUSH="false"

To switch foreground notifications at runtime, call setShowPushnotificationAlert(show) on the pushwoosh object. Pass true to display foreground notifications and false to hide them. On iOS, call it after registerDevice.

When ANDROID_FOREGROUND_PUSH is true, setShowPushnotificationAlert(false) does not hide foreground notifications on Android. To control them at runtime on Android, install the plugin with ANDROID_FOREGROUND_PUSH="false".

The plugin writes ANDROID_FOREGROUND_PUSH to the com.pushwoosh.foreground_push key in AndroidManifest.xml. In a Cordova app, true in this key shows foreground notifications. In the native Android SDK, the same key has the opposite meaning: true hides foreground notifications.

Custom push sound

To enable custom notification sound on Android, place the sound files in www/res folder and specify every sound in config.xml:

<?xml version=‘1.0’ encoding=‘utf-8’?>
<widget id="YOUR_ID" version="1.0.0" xmlns="http://www.w3.org/ns/widgets” xmlns:cdv=“http://cordova.apache.org/ns/1.0">
  ...
    <platform name="android">
        <allow-intent href="market:*" />
    ...
        <-- Add this line for each sound -->
        <resource-file src="www/res/push.wav" target="res/raw/push.wav" />
    </platform>
</widget>

The sounds will be accessible in the Sound dropdown menu of the Send Push panel.

On iOS, sound files are not automatically associated with the Pushwoosh Application yet, but can be used manually, e.g. www/res/sound_name.wav.

Custom push icon

Push notification icon can be customized on Android locally by using pw_notification as resource name for such icon (see sample 1 2); or remotely by referencing any resource name in the Icon setting in the Send Push panel.

Custom push data

Custom push data can be sent using the Action setting in the Send Push panel. To receive and handle such data use the following code:

document.addEventListener('push-notification',
  function(event) {
    var message = event.notification.message; // Push message
    var userData = event.notification.userdata; // Custom push data

    if (userData) {
      // handle custom push data here
    }
  }
);

Controlling Log level

In order to assist with debugging and integration, SDK will print all the requests to the console by default. When you are ready for the production build, set LOG_LEVEL variable to one of the following values:

NONE – no logs from the SDK
ERROR – only display errors in the console
WARNING – show warnings
INFO – show informational messages
DEBUG – show everything, including debug information (default)

Example:

cordova plugin add pushwoosh-cordova-plugin --variable LOG_LEVEL="INFO"

Deep linking

We recommend using https://github.com/EddyVerbruggen/Custom-URL-scheme
It’s super easy to set deep links for Cordova and it works with Pushwoosh deep linking functionality out of the box.

You can find installation and usage in this guide or in the plugin docs.

Rich Media JS Bridge

You can call your JS functions from Rich Media in Cordova WebView via javascript interfaces.
A call from a Rich Media must have the following format:

<interface>.callFunction(‘<function_name>’, <params_string>)

Example:

1. Create Rich Media with a javascript call:

testBridge.callFunction('testFunction', JSON.stringify({'param1' : 1, 'param2':'test'}))

2. Add a javascript interface to your project:

pushNotification.addJavaScriptInterface('testBridge');

3. Add function:

function testFunction(params) {
    alert("Bridge is working! " + params.param1 + " " + params.param2);
}

Using Pushwoosh plugin with other FCM services

If your app uses other plugins that rely on firebase-messaging, it might result in conflicts, or in one of the plugins not working as expected. To resolve this conflict, you can add a custom FirebaseMessagingService class that will route push notifications between the plugins. Pushwoosh Cordova plugin contains a template of this class which you can use as is to force all notifications to go through Pushwoosh handlers or modify it to handle notifications from other providers as well. To enable the template, uncomment the following lines in the plugin’s plugin.xml:

    <service android:name="com.pushwoosh.plugin.pushnotifications.CustomFirebaseMessagingService" android:exported="false">
        <intent-filter>
            <action android:name="com.google.firebase.MESSAGING_EVENT"/>
        </intent-filter>
    </service>

Your feedback helps us create a better experience, so we would love to hear from you if you have any issues during the SDK integration process. If you face any difficulties, please do not hesitate to share your thoughts with us via this form.