プッシュ通知の統合

この参考記事では、React Native のプッシュ通知を設定する方法について説明します。プッシュ通知を統合するには、各ネイティブプラットフォームを個別に設定する必要があります。リストされているそれぞれのガイドに従って、インストールを完了します。

ステップ1:初期設定を完了する

• expo
• android
• ios

1
"firebaseCloudMessagingSenderId": "693679403398"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "expo": {
    "android": {
      "googleServicesFile": "PATH_TO_GOOGLE_SERVICES"
    },
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidApiKey": "YOUR-ANDROID-API-KEY",
          "iosApiKey": "YOUR-IOS-API-KEY",
          "enableBrazeIosPush": true,
          "enableFirebaseCloudMessaging": true,
          "firebaseCloudMessagingSenderId": "YOUR-FCM-SENDER-ID",
          "androidHandlePushDeepLinksAutomatically": true
        }
      ],
    ]
  }
}

ステップ 2:プッシュ通知の許可をリクエストする

iOS および Android 13以降のユーザーにプッシュ通知の許可を要求するには、Braze.requestPushPermission() メソッド (v 1.38.0以降で使用可能) を使用します。Android 12以前の場合、このメソッドは何も実行しません。

このメソッドは、SDK が iOS 上のユーザーにどの権限を要求するかを指定する必須パラメーターを受け取ります。これらのオプションは Android には影響しません。

1
2
3
4
5
6
7
8
const permissionOptions = {
  alert: true,
  sound: true,
  badge: true,
  provisional: false
};

Braze.requestPushPermission(permissionOptions);

ステップ 2.1:プッシュ通知をリッスンする (オプション)

さらに、Braze が受信プッシュ通知を検出して処理したイベントをサブスクライブすることもできます。リスナーキー Braze.Events.PUSH_NOTIFICATION_EVENT を使用します。

1
2
3
4
Braze.addListener(Braze.Events.PUSH_NOTIFICATION_EVENT, data => {
  console.log(`Push Notification event of type ${data.payload_type} seen. Title ${data.title}\n and deeplink ${data.url}`);
  console.log(JSON.stringify(data, undefined, 2));
});

プッシュ通知イベントフィールド

プッシュ通知フィールドの完全なリストについては、以下の表を参照してください。

ステップ3: ディープリンクを有効にする (オプション)

プッシュ通知がクリックされたときに Braze が React コンポーネント内のディープリンクを処理できるようにするには、追加の手順に従います。

• expo
• android
• ios

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"BrazeProject";
  self.initialProps = @{};

  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
  configuration.triggerMinimumTimeInterval = 1;
  configuration.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazeReactBridge initBraze:configuration];
  AppDelegate.braze = braze;

  [self registerForPushNotifications];
  [[BrazeReactUtils sharedInstance] populateInitialUrlFromLaunchOptions:launchOptions];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Linking.getInitialURL()
  .then(url => {
    if (url) {
      console.log('Linking.getInitialURL is ' + url);
      showToast('Linking.getInitialURL is ' + url);
      handleOpenUrl({ url });
    }
  })
  .catch(err => console.error('Error getting initial URL', err));

// Handles deep links when an iOS app is launched from a hard close via push click.
Braze.getInitialURL(url => {
  if (url) {
    console.log('Braze.getInitialURL is ' + url);
    showToast('Braze.getInitialURL is ' + url);
    handleOpenUrl({ url });
  }
});

ステップ 4:プッシュ通知の表示をテストする

この時点で、デバイスに通知を送信できるはずです。次のステップに従って、プッシュ統合をテストします。

1. Braze.changeUserId('your-user-id') メソッドを呼び出して、React アプリケーションにアクティブユーザーを設定します。
2. [キャンペーン] に移動し、新しいプッシュ通知キャンペーンを作成します。テストしたいプラットフォームを選択します。
3. テスト通知を作成し、[テスト] タブに移動します。テストユーザーと同じ user-id を追加し、[テストを送信] をクリックします。まもなくデバイスに通知が届くはずです。

Androidプッシュを追加FMSに転送する

追加の Firebase Messaging Service (FMS) を使用する場合は、アプリケーションが Braze 以外からプッシュを受信した場合に呼び出すフォールバック FMS を指定できます。以下に例を示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          ...
          "androidFirebaseMessagingFallbackServiceEnabled": true,
          "androidFirebaseMessagingFallbackServiceClasspath": "com.company.OurFirebaseMessagingService"
        }
      ]
    ]
  }
}

Expoでアプリの拡張機能を設定する

iOS のリッチプッシュ通知を有効にする

Expo を使用して iOS でリッチプッシュ通知を有効にするには、app.json の expo.plugins オブジェクトで enableBrazeIosRichPush プロパティを true に構成します。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          ...
          "enableBrazeIosRichPush": true
        }
      ]
    ]
  }
}

最後に、このアプリ拡張機能のバンドル識別子を、プロジェクトの認証情報設定に追加します：<your-app-bundle-id>.BrazeExpoRichPush.このプロセスの詳細については、Expo Application Services でアプリ拡張機能を使用するを参照してください。

iOSでプッシュストーリーズを有効にする

Expoを使ってiOSでプッシュストーリーズを有効にするには、アプリケーションにアプリグループが定義されていることを確認する。詳細については、アプリグループの追加を参照してください。

次に、enableBrazeIosPushStories プロパティを true に構成し、app.json の expo.plugins オブジェクトの iosPushStoryAppGroup にアプリグループ ID を割り当てます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          ...
          "enableBrazeIosPushStories": true,
          "iosPushStoryAppGroup": "group.com.company.myApp.PushStories"
        }
      ]
    ]
  }
}

最後に、このアプリ拡張機能のバンドル識別子を、プロジェクトの認証情報設定に追加します：<your-app-bundle-id>.BrazeExpoPushStories.このプロセスの詳細については、Expo Application Services でアプリ拡張機能を使用するを参照してください。

Expo Application Services でアプリ拡張機能を使用する

Expo Application Services（EAS）を使用していて、enableBrazeIosRichPush またはenableBrazeIosPushStories を有効にしている場合は、プロジェクト内の各アプリ拡張機能に対応するバンドル識別子を宣言する必要がある。EAS でコード署名を管理するためにプロジェクトがどのように構成されているかによって、このステップにアプローチする方法は複数あります。

一つの方法は、Expo のアプリ拡張ドキュメントに従って、app.json ファイルで appExtensions 設定を使用することです。あるいは、Expo のローカル認証情報ドキュメントに従って、credentials.json ファイルで multitarget 設定を行うこともできます。