js-cordova

プッシュ通知 (Monaca)¶

以下の手順は、MonacaクラウドIDEからiOSアプリをビルドできるよう設定済みであることを前提としています。MonacaクラウドIDEからiOSアプリをビルドする設定はこちらをご覧ください。

プッシュ通知の設定¶

APNs証明書の設定 (iOS) と FCMの設定 (Android) を参照し、設定してください。

Provisioning ProfileをMonacaクラウドIDEに登録する¶

Monacaで 設定 > iOSビルド設定... > ビルド設定の管理 を開き、 プロファイルのアップロード をクリックし、APNs証明書の設定 (iOS) でダウンロードしたProvisioning Profileを選択してください。

`config.xml` ファイルを編集する¶

注釈

Cordova 7.1未満をご利用の場合は設定方法が異なります。詳細は Cordova 7.1未満を利用する場合の設定を参照してください。

名前空間および `platform` タグを追加する¶

プロジェクト直下のconfig.xmlを開き、 widget タグに xmlns:android="http://schemas.android.com/apk/res/android" を追加してください。また、config.xmlの中に <platform name="android"> タグが存在しない場合、 widget タグの下に追加してください。

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

config-fileタグを追加する¶

以下の手順で config-file タグを追加してください。

Receiverの登録¶

以下のXML中の "YOUR_PACKAGE_NAME" をアプリケーションのパッケージ名に置き換え、config.xmlの <platform name="android"> タグの中に追加してください。

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

アイコンと背景色のカスタマイズ¶

Android5.0以降の機種で、通知エリアに表示されるアイコンとその背景色をカスタマイズする場合は、以下のXMLをconfig.xmlの <platform name="android"> タグの中に追加してください。Android5.0未満の機種では以下の設定は無視され、通知エリアにはアプリケーションのアイコンおよびシステムデフォルトの背景色が使用されます。

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

通知チャンネルの設定¶

Android Oにて、ユーザーが通知を管理できるように通知チャンネルが導入されました。

Repro SDKで利用する通知チャンネルの設定を行うには、「ID」「名前」「ユーザー向けの説明」「badgeの表示有無」を以下のようにconfig.xmlの <platform name="android"> タグの中に追加してください。IDと名前の指定は必須、その他は省略可能です。「ユーザー向けの説明」省略時は空文字列、「badgeの表示有無」省略時はbadgeの表示有りとなります。

警告

アプリのtargetSDKVersionが26以上かつAndroid O以降の機種で動作させる場合、IDと名前が指定されていなければSDKはReproからのプッシュ通知を表示いたしませんのでご注意ください。

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

指定されたIDの通知チャンネルが存在しない場合は上記の指定を基にSDKが自動で作成し、指定されたIDの通知チャンネルが存在する場合は既存のものを利用します。

既存のものを利用する場合、SDKは「名前」、「ユーザー向けの説明」及び「チャンネルの重要度」を更新します。

また、アプリのtargetSDKVersionが25以下の場合、あるいは、Android O未満の機種の場合は、SDKは上記の通知チャンネルに関する設定を無視します。

注釈

通知チャンネルはAndroid Oで導入されたAndroidの標準機能です。通知チャンネルの詳細はこちらをご覧ください。

文字列リソースの追加¶

通知チャンネルの設定に合わせて、 channel_name と channel_description の文字列リソースを追加します。以下のようにconfig.xmlの <platform name="android"> タグの中に追加してください。

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

`google-services.json` ファイルを追加する¶

FCMの設定 (Android) でダウンロードした google-services.json をプロジェクトのディレクトリにアップロードします。

下記のXMLをconfig.xmlの <platform name="android"> タグの中に追加してください。

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

注釈

Cordova Android 7.0未満をご利用の場合は設定方法が異なります。詳細は Cordova Android 7.0未満を利用する場合の設定を参照してください。

Google Services Gradle Pluginを導入する¶

Google Services Gradle Pluginを導入します。

config.xml 内の <platform name="android"> タグの中に、以下の記述を追加してください。

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

注釈

Cordova Plugin 6.8.0未満の場合はReproによって自動的にGoogle Services Gradle Plugin導入されるため、この設定は不要です。

警告

この手順によるGoogle Services Gradle Pluginの導入はCordova Android 9.0.0以降の場合のみ可能です。
Cordova Plugin 6.8.0以上を利用しているかつ Cordova Android 9.0.0未満を利用している場合は、別途Google Services Gradle Pluginの導入を行うかもしくはCordova Android 9.0.0以降へのアップデートを検討してください。

オプション：Firebaseの依存バージョンを変更する¶

firebase-core 及び firebase-messaging の依存バージョンを変更する場合は、下記の手順で指定してください。

設定 > Cordovaプラグインの管理 をクリックします。

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

Repro にカーソルを合わせ、設定をクリックします。

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

インストールパラメータに firebase-core 及び firebase-messaging の依存バージョンを指定します。例えば、 firebase-core のバージョン16.0.0、 firebase-messaging のバージョン17.1.0を指定する場合は、下記のインストールパラメータを指定してください。

FIREBASE_CORE_VERSION=16.0.0
FIREBASE_MESSAGING_VERSION=17.1.0

OK をクリックします。

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

デバイストークン、Registration IDをReproに送信¶

プッシュ通知を利用するために、デバイストークン、Registration IDをReproに送信します。

index.htmlにてプッシュ通知の設定を行います。

function onDeviceReady() {
  ...

  if (typeof Repro != "undefined") {
    // Setup Repro
    Repro.setup("YOUR_APP_TOKEN");

    // For iOS
    Repro.enablePushNotificationForIOS();

    // For Android
    Repro.enablePushNotificationForAndroid();
  }

  ...
}

上記の実装が終わったら、プッシュ通知作成画面をご覧ください。

プッシュ通知受信時の動作をカスタマイズする¶

Monacaではオプション：プッシュ通知受信時の動作をカスタマイズするに示すプッシュ通知受信時の動作のカスタマイズに対応しておりません。ご了承ください。

オプション：ユニバーサルリンク/アプリリンクを使用する¶

端末に表示されたプッシュ通知およびアプリ内メッセージに設定されたリンクをタップした際に実行されるURLには、ユニバーサルリンク（またはアプリリンクと呼ばれる）を指定することが可能です。（簡単のため、以下ではこれらをユニバーサルリンクと呼びます）

アプリにてユニバーサルリンクの実行時の処理を追加するには、以下の通り実装を行う必要があります。（ここで設定された動作は、プッシュ通知およびアプリ内メッセージ対し有効となります。）

ユニバーサルリンクのURLパターンを登録する¶

ユニバーサルリンクを利用するためには、まずユニバーサルリンクのURLのパターン（正規表現）を指定する必要があります。

注釈

パターン（正規表現）に合致すると、プッシュ通知の開封時や、アプリ内メッセージの遷移先に設定されたURLに対して、後述のコールバック処理をキックします。

また、アプリ内メッセージでHTMLコンテンツを表示するとき、そのコンテンツ内で発生したリクエストに対してもユニバーサルリンクの判定が行われます。

この指定は、iOSの場合は AppDelegate または .plist ファイル、Androidの場合は Application 継承クラスまたは AndroidManifest.xml ファイルのどちらか一方に記述することで行うことができます。

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

警告

ユニバーサルリンクとして設定するURLパターンは、可能な限り ドメインとパスまで含めて具体的に指定 し、 全て小文字で指定 してください。

もし、 https のようにスキームのみを指定した場合、アプリ内メッセージで表示された画面内で実行されたスクリプトなどによるリクエストもユニバーサルリンクと誤って判定され、意図しないタイミングでコールバック処理が実行される可能性があります。

また、URLパターンのスキーム/ドメイン部分に大文字を使用した場合、HTMLアプリ内メッセージで表示したボタンからユニバーサルリンクを使って遷移させようとするときに、スキーム/ドメイン部分が自動的に小文字に変換されて処理されます。パターン（正規表現）に一致せず、意図したタイミングでコールバック処理が実行されない可能性があります。

ユニバーサルリンク実行時の処理を登録する¶

次に、ユニバーサルリンクが実行された際に動作するコールバック処理を実装します。処理内には、例えばURLのパターンに応じて画面遷移を行う動作などを記述します。

#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, ...
    }
});

プッシュ通知 (Monaca)¶

プッシュ通知の設定¶

Provisioning ProfileをMonacaクラウドIDEに登録する¶

config.xml ファイルを編集する¶

名前空間および platform タグを追加する¶

config-fileタグを追加する¶

Receiverの登録¶

アイコンと背景色のカスタマイズ¶

通知チャンネルの設定¶

文字列リソースの追加¶

google-services.json ファイルを追加する¶

Google Services Gradle Pluginを導入する¶

オプション：Firebaseの依存バージョンを変更する¶

デバイストークン、Registration IDをReproに送信¶

プッシュ通知受信時の動作をカスタマイズする¶

オプション：ユニバーサルリンク/アプリリンクを使用する¶

ユニバーサルリンクのURLパターンを登録する¶

ユニバーサルリンク実行時の処理を登録する¶

`config.xml` ファイルを編集する¶

名前空間および `platform` タグを追加する¶

`google-services.json` ファイルを追加する¶