プッシュ通知 (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.10" />
注釈
- 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プラグインの管理 をクリックします。
Repro にカーソルを合わせ、 設定 をクリックします。
インストールパラメータに 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 をクリックします。
デバイストークン、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のパターン(正規表現)を指定する必要があります。
この指定は、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のパターンに応じて画面遷移を行う動作などを記述します。
#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, ...
}
});