푸시 알림 통합

이 참조 문서에서는 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단계: 푸시 알림 권한 요청하기

Braze.requestPushPermission() 메서드(v1.38.0 이상에서 사용 가능)를 사용하여 iOS 및 Android 13 이상에서 사용자에게 푸시 알림에 대한 권한을 요청합니다. 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 메시징 서비스(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 애플리케이션 서비스에서 앱 확장 사용을 참조하세요.

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 애플리케이션 서비스에서 앱 확장 사용을 참조하세요.

Expo 애플리케이션 서비스로 앱 확장 사용

Expo 애플리케이션 서비스(EAS)를 사용하고 enableBrazeIosRichPush 또는 enableBrazeIosPushStories를 활성화한 경우 프로젝트의 각 앱 확장에 해당하는 번들 식별자를 선언해야 합니다. 이 단계에는 EAS로 코드 서명을 관리하도록 프로젝트를 구성한 방식에 따라 여러 가지 방법으로 접근할 수 있습니다.

한 가지 방법은 Expo의 앱 확장 설명서에 따라 app.json 파일에서 appExtensions 구성을 사용하는 것입니다. 또는 Expo의 로컬 자격 증명 설명서에 따라 credentials.json 파일에서 multitarget 설정을 구성할 수도 있습니다.