js-cordova

Push Notification (Cordova / PhoneGap)

Settings for Push Notification

See Settings for APNs Certificate (iOS) and Settings for FCM (Android) to setup.

Edit config.xml

Note

• If you are using a version of Cordova below 7.1, then the configuration method is different. See Configuration when using a Cordova version below 7.1 for details.

Add namespace and platform tags

Open config.xml directly under your project's directory, and edit widget tag to add attribute xmlns:android="http://schemas.android.com/apk/res/android". In addition, if the tag <platform name="android"> does not exist in your config.xml, please add it under the widget tag.

<widget xmlns="http://www.w3.org/ns/widgets"
        xmlns:android="http://schemas.android.com/apk/res/android"
        id="..." version="1.0.0">
    ...
    <platform name="android">
        ...
    </platform>

Add config-file tags

Please follow the steps below to add the config-file tags.

Register receiver

Replace "YOUR_PACKAGE_NAME" with your application's package name in the following snippet, and add it to config.xml inside of <platform name="android"> tag.

<config-file target="AndroidManifest.xml" parent="./application">
    <receiver
        android:name="io.repro.android.ReproReceiver"
        android:exported="true"
        android:permission="com.google.android.c2dm.permission.SEND">
        <intent-filter>
            <action android:name="com.google.android.c2dm.intent.RECEIVE" />
            <category android:name="YOUR_PACKAGE_NAME" />
        </intent-filter>
    </receiver>
</config-file>

Setup Notification Channels

Since Android O, Notification Channels were introduced to help users manage their notifications.

In order to utilize Notification Channels in Repro SDK, please specify inside the <platform name="android"> tag of config.xml the "channel id", "channel name", "channel description", and "show badge" of your channel as shown below. The channel id and name are required while the others are optional. When omitted, the default value for "channel description" is an empty string, and "show badge" will be true.

Warning

• If the targetSDKVersion of your application is greater than or equal to 26, please note that channel id and name are required or the SDK won't show notifications sent from Repro while running on devices with Android O or later.

<config-file target="AndroidManifest.xml" parent="./application">
    <meta-data
        android:name="io.repro.android.PushNotification.ChannelId"
        android:value="YOUR_CHANNEL_ID">
    </meta-data>

    <meta-data
        android:name="io.repro.android.PushNotification.ChannelName"
        android:resource="@string/channel_name">
    </meta-data>

    <meta-data
        android:name="io.repro.android.PushNotification.ChannelDescription"
        android:resource="@string/channel_description">
    </meta-data>

    <meta-data
        android:name="io.repro.android.PushNotification.ShowBadge"
        android:value="true">
    </meta-data>
</config-file>

If the channel of the specified id does not exist, it will be created automatically by the SDK based on the information provided in config.xml. If there is existing channel with the specified id, the SDK will use it.

The SDK will update the channel name and description and channel importance of the existing channel being used by the SDK.

The SDK will ignore the settings above when the targetSDKVersion of your application is 25 or below, or when the application is running on devices with versions earlier than Android O.

Note

Notification Channels were introduced as a standard feature in Android O. For the details, please refer to this page.

Add String Resource

In accordance with the setup of notification channels, please add the string resources for channel_name and channel_description. Add the following XML construct to your config.xml inside of the <platform name="android"> tag.

<config-file target="res/values/strings.xml" parent="/*">
    <string name="channel_name">YOUR_CHANNEL_NAME</string>
    <string name="channel_description">YOUR_CHANNEL_DESCRIPTION</string>
</config-file>

Customize Icon and Background Color

When customizing the icon and the background color displayed in the notification area for devices with Android 5.0 or above, add the below XML inside the <platform name="android"> tag in config.xml. This setting will be ignored with devices under Android 5.0, and notification area will use the application's icon as well as the system's default background color.

<config-file target="AndroidManifest.xml" parent="./application">
    <meta-data
        android:name="io.repro.android.PushNotification.SmallIcon"
        android:resource="@drawable/YOUR_ICON_ID">
    </meta-data>

    <meta-data
        android:name="io.repro.android.PushNotification.AccentColor"
        android:resource="@color/YOUR_COLOR_ID">
    </meta-data>
</config-file>

Add google-services.json

Copy google-services.json which you have downloaded from Settings for FCM (Android) to the project directory, and add the XML below into <platform name ="android"> tag of config.xml.

<resource-file src="google-services.json" target="app/google-services.json" />

Note

• When building for the Android platform, the warnings below may appear, but they do not effect the operation of the SDK.

  • Warning: The app gradle file must have a dependency on com.google.firebase:firebase-core for Firebase services to work as intended.

• If you are using Cordova Android less than version 7.0, the configuration method is different. See Settings for using Cordova Android 7.0 or lower for details.

Install Google Services Gradle Plugin

Install the Google Services Gradle Plugin.

Add the following XML construct to config.xml inside of the <platform name="android"> tag.

<preference name="GradlePluginGoogleServicesEnabled" value="true" />
<preference name="GradlePluginGoogleServicesVersion" value="4.3.15" />

Note

• If the Cordova Plugin is less than 6.8.0, Repro will automatically install the Google Services Gradle Plugin, so this setting is not necessary.

Warning

• The procedure to install the Google Services Gradle Plugin is only available for Cordova Android 9.0.0 or later.

• If you are using Cordova Plugin 6.8.0 or higher and Cordova Android 9.0.0 or lower, you need to install the Google Services Gradle Plugin separately.

Option: change the depending version of Firebase

In case you want to change the depending version of firebase-core and firebase-messaging, please specify the versions in the command arguments. For example, to specify version 16.0.0 for firebase-core and version 17.1.0 for firebase-messagnig, please execute the command below:

# cordova
$ cordova plugin add cordova-plugin-repro \
    --variable FIREBASE_CORE_VERSION=16.0.0 \
    --variable FIREBASE_MESSAGING_VERSION=17.1.0

Warning

• The dependency on firebase-core has been removed since cordova-plugin-repro 6.5.0. As a result, setting FIREBASE_CORE_VERSION is no longer required.

Note

• Please specify version 17.1.0 or above for FIREBASE_MESSAGING_VERSION.

• If you're using Cordova CLI with a version lower than 7.1, open platforms/android/project.properties and edit as below. Because the changes to platforms/android/project.properties may be undone by the commands of Cordova CLI, please check the changes again each time before you start a build.

  • Change com.google.firebase:firebase-core:$FIREBASE_CORE_VERSION to com.google.firebase:firebase-core:16.0.4

  • Change com.google.firebase:firebase-messaging:$FIREBASE_MESSAGING_VERSION to com.google.firebase:firebase-messaging:17.3.4

Send Device Token and Registration ID to Repro

Send Device token and Registration ID to Repro in order to use push notifications.

Finish Push Notification Settings in index.js

   // phonegap-plugin-push instance variable
   var pushNotification;

   var app = {

     ...

     onDeviceReady: function() {
       app.receivedEvent('deviceready');

       Repro.setup("YOUR_APP_TOKEN");

       // For iOS
       Repro.enablePushNotificationForIOS();

       // For Android
       Repro.enablePushNotificationForAndroid();
     }
   };

After finishing the above implementation, see Create Push Notification.

Customize the behavior when receiving messages

In order to customize the handling of received push notifications, you will have to implement a handler mechanic similar to the native Android SDK. (In a Java or Kotlin class derived from FirebaseMessagingService where you would override the handler methods.)

Please refer to customize the behavior when receiving messages for implementation details.

Option: Using Universal-Links/App-Links

It is possible to custom handle the opening of Universal-Links (also called App-Links) when Push Notifications or In-App Messages are tabbed. (For simplification from now only called Universal-Links.)

Please follow the examples below in order to add a custom Universal-Link callback handler which is executed every time an Universal-Link would be opened from a Push-Notification or In-App Message.

How to register a regular expression to match Universal-Links.

In order to use Universal-Link callbacks, a regular expression based url matcher must be added.

Note

When a pattern (regular expression) is matched, the callback process described below is kicked to the URL set as the destination for opening a push notification or a message in the application.

When HTML content is displayed in in-app messages, universal linking is also determined for requests that occur within that content.

For iOS apps, these matcher regular expressions can be added in the AppDelegate or in the Apps designated .plist file. For Android apps your class that extents Application can be used or if that is not possible, the regular expressions can also be added to your AndroidManifest.xml file.

// AppDelegate.m

#import <Repro/Repro.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [Repro addOpenUrlFilterRegEx:@"https://example\\.com/page/"];
    [Repro addOpenUrlFilterRegEx:@"your-domain\\.com/.+\?universal=true"];
    ...
}


// .plist file
/*
<dict>
    <key>RPROpenUrlFilterRegExList</key>
    <array>
        <string>https://example\.com/page/</string>
        <string>your-domain\.com/.+\?universal=true</string>
    </array>
    ...
</dict>
*/

// MyApplication.java

import io.repro.android.Repro;

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Repro.addOpenUrlFilterRegEx("https://example\\.com/page/");
        Repro.addOpenUrlFilterRegEx("your-domain\\.com/.+\\?universal=true");
        ...
    }
...
}


// AndroidManifest.xml
// To specify multiple URL patterns, enter them separated by commas.
<application>
    ...
    <meta-data
        android:name="io.repro.android.OpenUrlFilterRegExList"
        android:value="https://example\\.com/page/;your-domain\\.com/.+\\?universal=true">
    </meta-data>
</application>

// AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool
{
    Repro.add(openUrlFilterRegEx: "https://example\\.com/page/")
    Repro.add(openUrlFilterRegEx: "your-domain\\.com/.+\\?universal=true")
    ...
}

// .plist file
/*
<dict>
    <key>RPROpenUrlFilterRegExList</key>
    <array>
        <string>https://example\.com/page/</string>
        <string>your-domain\.com/.+\?universal=true</string>
    </array>
    ...
</dict>
*/

Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.

Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.

// YourAppNameScene.cpp

bool YourAppName::init() {
    ReproCpp::addOpenUrlFilterRegEx("https://example\\.com/page/");
    ReproCpp::addOpenUrlFilterRegEx("your-domain\\.com/.+\\?universal=true");
    ...
}

Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.

Please follow native iOS and Android instructions in order to add the filters
to the plist/AndroidManifest files or the main AppDelegate/Application classes.

Warning

Specify the URL pattern to be set as a universal link as concretely as possible, including the domain and path , and should be all in lowercase .

If only a scheme is specified, such as https, a request made by a script executed in a screen displayed by an in-app message may be mistakenly judged as a universal link, and callback processing may be executed at an unintended timing.

If uppercase letters are used in the scheme/domain portion of the URL pattern, the scheme/domain portion is automatically converted to lowercase and processed when attempting to use a universal link to transition from a button displayed in an HTML in-app message. The pattern (regular expression) may not match and callback processing may not be executed at the intended timing.

Adding a callback handler for opening Universal-Links

Next a callback handler for custom processing of Universal-Links is added. The URL that was about to be opened is passed to the callback, where then depending on the URL custom code can be executed.

#import <Repro/Repro.h>

...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [Repro setOpenUrlCallback:^(NSURL *url) {
        if ([url.host isEqualToString:@"example.com"]) {
            // In case of your universal link perform navigation, present content, ...
            handleUniversalLink(url);
        }
    }];

    ...
    [Repro setup:@"YOUR_APP_TOKEN"];
    ...
}

// Set a callback that is executed everytime an URL is about to be opened
Repro.setOpenUrlCallback { url in
    if url.host == "example.com" {
        // In case of your universal link perform navigation, present content, ...
        handleUniversalLink(url)
    }
}
...
Repro.setup(token: "YOUR_APP_TOKEN")
...

import io.repro.android.Repro;

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        // In order to execute a callback when a push notification is tapped,
        // the callback must be set in Application, not Activity.
        Repro.setOpenUrlCallback(new Repro.OpenUrlCallback() {
            // ** This callback method is executed in the main thread **
            @Override
            public void onOpened(Uri uri) {
                if ("example.com".equals(uri.getHost())) {
                    // In case of your universal link perform navigation, present content, ...
                }
            }
        });

        ...
        Repro.setup(this, YOUR_APP_TOKEN);
        ...
    }
    ...
}

Repro.setOpenUrlCallback((uri) { // uri is of type Uri
   debugPrint("Universal Link Callback Handler received: " + uri.toString());
});

// Somewhere before Repro.Setup(...)
Repro.SetOpenUrlCallback(uri => // uri is of type Uri
{
    Debug.Log("Universal Link Callback Handler received: " + uri.ToString());
});

bool YourAppName::init() {
    ReproCpp::addOpenUrlFilterRegEx(...);

    ReproCpp::setOpenUrlCallback([](const char *url) {
        if (strcmp(url, "example.com") == 0) {
            // In case of your universal link perform navigation, present content, ...
        }
    });

    ReproCpp::setup("YOUR_APP_TOKEN")
    ...
}

Repro.setOpenUrlCallback(function(url) { // url is of type String
    alert('Universal Link Callback Handler received: ' + url);
    if (url.includes("http://example.org")) {
        // In case of your universal link perform navigation, present content, ...
    }
});

Repro.setOpenUrlCallback( (url) => {  // url is of type String
    console.log('Universal Link Callback Handler received: ' + url);
    if (url.includes("http://example.org")) {
        // In case of your universal link perform navigation, present content, ...
    }
});

• « Push Notification (Unity)
• Push Notification (Monaca) »