준비 사항 안내

ReactNative 앱에서 Push 발송을 위한 SDK 설치 및 적용을 설명합니다.

SDK 설정에 참고할 수 있는 참고코드를 제공합니다.

아래의 링크를 클릭하여 SampleReactNative 코드를 다운받을 수 있습니다.

참고코드 보러가기↗️

Push SDK 설정을 테스트 한 앱의 정보는 다음과 같습니다.

• react-native: 0.71.1

• android :

  targetSdkVersion = 31 or 33 ,

Test Device = Android 9.0 , Android 12.0 ,Android 13.0

• iOS :

  Xcode = 14.2 version ,

Deployment Target = 12.4 ,

Test Device = 16.3.1 (iPhone 13 mini)

플러그인 적용

터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.

npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git

프로젝트에 플러그인이 정상 다운로드되면 node_modules 폴더 아래 플러그인 파일이 추가된 것을 확인할 수 있습니다.

(폴더 경로 : [project name] > node_modules > DotReactNativeBridge 폴더 )

(선택) Notification Permission 관리

알림에 대한 권한요청의 시점을 조정하는 부분은 선택사항이며, 이미 앱에 구현되었거나, Notification Alert 창의 발생 시점에 대한 제어가 불필요하시다면 꼭 추가로 진행하실 필요는 없습니다.

만약 추가를 원하신다면 아래에 링크 된 ReactNative Firebase Permission 참조를 추천드립니다.

안드로이드의 경우 
* Target SDK API 32 이하의 앱, AOS 13에 설치 : 자동으로 알림권한 요청.
* Target SDK API 32 이상의 앱, AOS 13에 설치 : 권한요청을 원하는 타이밍에 노출 가능.
* Target SDK API 32 이상의 앱, AOS 12 이하에 설치 : 권한요청 없이 사용가능.

iOS의 경우
* 사용자의 권한을 요청하는 기본 권한 대화상자가 앱오픈 초기에 생성.

Cloud Messaging | React Native FirebaseReact Native Firebase

라이브러리 추가

push 설정에 필요한 firebase Cloud Messaging 라이브러리를 package.json 에 추가합니다.

package.json

# Install & setup the app module
yarn add @react-native-firebase/app

# Install the messaging module
yarn add @react-native-firebase/messaging

와이즈트래커 대시보드 계정 준비

다음과 같이 푸시메시지 수신을 위한 적용이 완료되면, 와이즈트래커 대시보드에서 테스트를 진행하실 수 있습니다.

적용 후 바로 테스트까지 진행하실 수 있도록, 고객사 담당자를 통해 대시보드에 로그인할 수 있는 계정을 전달받아 로그인 후 마케팅 메시지 메뉴가 확인이 되는지까지 체크 해 주세요.

와이즈트래커 대시보드 로그인 하기↗️

그럼 이제 OS 별로 푸시메세지 적용을 위한 단계를 시작해 볼까요? 🏃🏻‍♂️