プッシュ通知の統合

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

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

• 万博
• アンドロイド
• 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コンポーネント内のディープリンクを処理できるようにするには、追加の手順に従う。

• 万博
• アンドロイド
• 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でプッシュストーリーズを有効にするには、アプリケーションにアプリグループが定義されていることを確認する。詳細については、[アプリグループの追加]4 を参照のこと。

次に、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 設定を行うこともできる。