js-cordova

Push Notification (Monaca)¶

The following instructions assume you have completed iOS build settings in Monaca Cloud IDE. Please refer to this for the details of iOS build settings in Monaca Cloud IDE.

Settings for Push Notification¶

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

Register Provisioning Profile on Monaca Cloud IDE¶

Open Config > iOS Build Settings... > Mange build settings. Click Upload Profile and select the Provisioning Profile which was downloaded in Settings for APNs Certificate (iOS) .

Edit `config.xml`¶

Note

If you are using less than Cordova 7.1, 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>

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>

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>

Add `google-services.json`¶

Upload google-services.json which you have downloaded from Settings for FCM (Android) to the project directory.

Add the XML below into a <platform name ="android"> tag of your config.xml.

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

Note

If you are using Cordova Android less than 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, please install Google Services Gradle Plugin separately or upgrade to Cordova Android 9.0.0 or higher.

Option: change the depending version of Firebase¶

In case you want to change the depending version of firebase-core and firebase-message, please follow the steps below.

Click Configure > Cordova Plugin Settings .

../../../_images/3-1-cordova-plugin.en.png

Move the cursor over Repro and click Configure .

../../../_images/3-2-choose-repro.en.png

Specify the depending version of firebase-core and firebase-messaging in Install Parameters. For example, in order to specify version 16.0.0 for firebase-core and version 17.1.0 for firebase-messagnig, please specify in Install Parameters as below.

FIREBASE_CORE_VERSION=16.0.0
FIREBASE_MESSAGING_VERSION=17.1.0

Click OK.

../../../_images/3-3-set-install-param.en.png

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.html.

function onDeviceReady() {
  ...

  if (typeof Repro != "undefined") {
    // Setup Repro
    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¶

Monaca does currently not support customized behavior for received push notifications in combination with the Repro SDK.

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 (Monaca)¶

Settings for Push Notification¶

Register Provisioning Profile on Monaca Cloud IDE¶

Edit config.xml¶

Add namespace and platform tags¶

Add config-file tags¶

Register receiver¶

Customize Icon and Background Color¶

Setup Notification Channels¶

Add String Resource¶

Add google-services.json¶

Install Google Services Gradle Plugin¶

Option: change the depending version of Firebase¶

Send Device Token and Registration ID to Repro¶

Customize the behavior when receiving messages¶

Option: Using Universal-Links/App-Links¶

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

Adding a callback handler for opening Universal-Links¶

Edit `config.xml`¶

Add namespace and `platform` tags¶

Add `google-services.json`¶