콘텐츠로 이동

React Native SDK

아래 가이드를 참고하여 플레어레인에 푸시 발송에 필요한 인증 값을 입력합니다.

터미널에서 프로젝트 루트 디렉토리로 이동한 뒤, 다음 명령어를 입력합니다

Terminal window
$ yarn add @flarelane/react-native-sdk@1.10.0

유저로부터 푸시 알림 구독을 원활히 받아낼 수 있도록 compileSdkVersion을 최소 33으로 지정해주세요.

android {
compileSdkVersion 33
...
defaultConfig {
...
targetSdkVersion 33
}
}

Target 의 Signing & Capabilites으로 들어와 좌상단의 + Capability > Push Notifications 를 선택하여 추가합니다.

또한 Background Modes 를 선택한 뒤 Remote notifications 를 추가합니다.

Xcode Signing and Capabilities 탭에서 Push Notifications와 Background Modes 활성화 화면

iOS에서는 이미지 등 미디어 첨부를 위해 Notification Service Extension 생성이 필요합니다.

Xcode 에서 File > New > Target 에서 Notification Service Extension 을 선택합니다.

Xcode 새 타겟 추가 대화상자에서 Notification Service Extension 선택 화면

Product Name에 적절한 이름을 입력합니다. 본 가이드에서는 FlareLaneNotificationServiceExtension 으로 정의하겠습니다.

Xcode 새 타겟 설정에서 FlareLaneNotificationServiceExtension 이름 입력 화면

Cancel을 클릭하여 별도의 Scheme은 활성화하지 않도록 합니다.

Xcode 스킴 활성화 여부를 묻는 대화상자에서 Cancel 선택 화면

이후 이번에 만든 Notification Service Extension TargetMinimum Deployments 버전을 현재 사용 중인 메인 앱 Target의 버전과 동일하게 설정합니다.

Xcode Notification Service Extension 타겟의 Minimum Deployments 버전 설정 화면

본 앱과 Extension 간 데이터 동기화를 위해서는 App Group 설정이 필요합니다.

Target 의 Signing & Capabilites으로 들어와 좌상단의 + Capability > App Groups 를 선택하여 추가합니다.

group.번들ID.flarelane이라는 이름의 그룹을 추가합니다. 여기서 번들ID는 본 앱의 Bundle Identifier와 일치해야 합니다.

Xcode Signing and Capabilities에서 App Groups 추가 및 flarelane 그룹 등록 화면

정상적으로 추가 후 해당 App Group을 활성화합니다.

Xcode App Groups에서 flarelane 그룹 활성화 화면

마찬가지로 이전에 만든 Extension 에서도 동일한 이름의 App Group을 추가하고 활성화합니다.

Xcode Extension 타겟에서 동일한 flarelane App Group 활성화 화면

다음으로 XCode 종료 후 ios 디렉토리 내 Podfile을 열고 다음과 같이 추가합니다.

// 파일 최하단의 아래 줄 추가
// 앞서 입력한 Extension의 Product Name을 target 이름으로 설정합니다.
target 'FlareLaneNotificationServiceExtension' do
pod 'FlareLane', '1.10.0'
end

pod install 를 실행하여 SDK 설치를 완료합니다.

  1. application(:didRegisterForRemoteNotificationsWithDeviceToken:) 대응 메소드 추가
import FlareLane
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
// 2
FlareLaneAppDelegate.shared.application(application, didRegisterForRemoteNotificationsWithDeviceToken: deviceToken)
}
}

5-5. UNUserNotificationCenterDelegate 메소드 추가

Section titled “5-5. UNUserNotificationCenterDelegate 메소드 추가”
  1. AppDelegate에 UNUserNotificationCenterDelegate 지정
  2. userNotificationCenter(:willPresent:withCompletionHandler:) 대응 메소드 추가
  3. 대응 메소드 추가
import FlareLane
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// 1
UNUserNotificationCenter.current().delegate = self
}
}
extension AppDelegate: UNUserNotificationCenterDelegate {
// 2
func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
FlareLaneNotificationCenter.shared.userNotificationCenter(center, willPresent: notification, withCompletionHandler: completionHandler)
}
// 3
func userNotificationCenter(_ center: UNUserNotificationCenter, didReceive response: UNNotificationResponse, withCompletionHandler completionHandler: @escaping () -> Void) {
FlareLaneNotificationCenter.shared.userNotificationCenter(center, didReceive: response, withCompletionHandler: completionHandler)
}
}

5-6. UNNotificationServiceExtension 메소드 추가

Section titled “5-6. UNNotificationServiceExtension 메소드 추가”
  1. didReceive(:withContentHandler:) 대응 메소드 추가
  2. serviceExtensionTimeWillExpire() 대응 메소드 추가
import UserNotifications
import FlareLane
class NotificationService: UNNotificationServiceExtension {
override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
// 1
// 플레어레인에서 발송한 푸시는 플레어레인의 메소드만 동작하도록 분기 처리합니다.
if FlareLaneNotificationServiceExtensionHelper.shared.isFlareLaneNotification(request) {
FlareLaneNotificationServiceExtensionHelper.shared.didReceive(request, withContentHandler: contentHandler)
} else {
// ...
}
}
override func serviceExtensionTimeWillExpire() {
// 2
FlareLaneNotificationServiceExtensionHelper.shared.serviceExtensionTimeWillExpire()
}
}

메인 App(ex. App.tsx)에 다음 초기화 코드를 입력합니다. 프로젝트 ID는 콘솔의 [프로젝트] 페이지에서 확인할 수 있습니다.

import FlareLane from '@flarelane/react-native-sdk';
// 알림 권한 팝업 타이밍을 제어하려면 2번째 파라미터를 false로 설정 후 적절한 시점에 .subscribe() 함수 실행
FlareLane.initialize('PROJECT_ID', true);

앱 설치 시 플레어레인에 생성된 기기는 '익명의 기기'이며 고객사가 별도로 관리하는 고유한 유저 ID를 연동함으로써 플레어레인의 기기와 고객사의 유저ID를 매칭할 수 있습니다.

유저ID가 연동되어있으면 많은 이점이 있습니다. 회원과 비회원을 구분할 수 있고, 고객사는 언제든지 유저ID를 기준으로 푸시 알림 발송이 가능하기 때문에 초기 연동시 권장드리고 있습니다.

보통 유저가 회원가입이나 로그인 성공 시, setUserId 함수를 통해 유저ID를 연동합니다.

FlareLane.setUserId("USER_ID");
  • 플레어레인은 기본적으로 푸시 알림 클릭 시 https, 딥링크 등 URL에 대해 자동 처리를 지원하고 있습니다. 만약 별도의 클릭 핸들러 구현이 필요한 경우 URL 자동 처리 비활성화를 참고하세요.
  • 인앱메시지(팝업) 를 참고하여 개발자가 직접 팝업이 노출될 타이밍에 코드 1줄(displayInApp)을 추가합니다.
<resources>
<!-- 알림 색상 변경 -->
<string name="flarelane_notification_accent_color">#BC0000</string>
</resources>
가이드
Mobile SDK Reference
React Native SDK