プッシュ通知 (React Native)¶
プッシュ通知の設定 (iOS)¶
APNs証明書の設定 (iOS) を参照し、設定してください。
デバイストークンをReproに送信¶
プッシュ通知の宛先を指定するためにデバイストークンをReproに送信します。
XcodeのCapabilitiesにてPush NotificationsをONにします。
デバイストークンの取得には、React Native 公式の PushNotificationIOS を利用することを推奨します。PushNotificationIOS のインストールに関しては、 こちらのドキュメント をご覧ください。
PushNotificationIOS を利用する場合のサンプルコードは以下の通りです。
import { PushNotificationIOS, Platform } from 'react-native';
import Repro from 'react-native-repro';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
if (Platform.OS === 'ios') {
PushNotificationIOS.addEventListener("register", (deviceToken) => {
console.log("iOS Push Notification Device Token: " + deviceToken);
Repro.setPushDeviceTokenString(deviceToken);
});
PushNotificationIOS.requestPermissions();
}
}
render() {
...
}
}
リッチ通知の受信準備¶
リッチ通知を受信するための実装は、 リッチプッシュ通知(iOS) をご覧ください。
プッシュ通知の設定 (Android)¶
Android のプッシュ通知に関しては、React Native 公式のAPIが存在しないため、 プッシュ通知(Android) に従ってネイティブコード側で実装してください。
オプション:ユニバーサルリンク/アプリリンクを使用する¶
端末に表示されたプッシュ通知およびアプリ内メッセージに設定されたリンクをタップした際に実行される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, ...
}
});