React Native SDK

플레어레인을 사용하여 리액트 네이티브(react native) 앱푸시 알림을 가장 쉽게 구현할 수 있습니다 푸시 토큰 및 구독 관리부터 딥링크 등 클릭 url 처리까지 코드 1줄에 모든 것이 포함되어 있습니다 타 푸시 솔루션과 함께 사용할 수 있습니다! 병행 사용을 위해서는 ios swizzling 비활성화 docid\ oicb cwf2jch il2ivvcv 가이드를 참고하여 몇 가지 작업을 추가해야합니다 안드로이드는 별도의 추가 작업이 필요하지 않습니다 실제 연동이 완료된 예시를 참고하실 수 있도록 샘플 코드 가 준비되어 있습니다 1\ 사전 준비 플레어레인 관리자 에서 회원가입 후 프로젝트 생성 2\ 인증 값 설정 아래 가이드를 참고하여 플레어레인에 푸시 발송에 필요한 인증 값을 입력합니다 android fcm 인증 정보 설정 docid\ f1jvz2yro7w2brcbq19xv ios apns 인증 정보 설정 docid\ rcodd2q8wlyaigujohc z 3\ sdk 설치 터미널에서 프로젝트 루트 디렉토리로 이동한 뒤, 다음 명령어를 입력합니다 terminal $ yarn add @flarelane/react native sdk\@1 8 2 4\ android 13 지원 유저로부터 푸시 알림 구독을 원활히 받아낼 수 있도록 compilesdkversion을 최소 33으로 지정 해주세요 app/build gradle android { compilesdkversion 33 defaultconfig { targetsdkversion 33 } } 5\ ios 프로젝트 설정 5 1 capability 설정 target 의 signing & capabilites 으로 들어와 좌상단의 + capability > push notifications 를 선택하여 추가합니다 또한 background modes 를 선택한 뒤 remote notifications 를 추가합니다 5 2 service extension 설정 ios에서는 이미지 등 미디어 첨부를 위해 notification service extension 생성이 필요합니다 xcode 에서 file > new > target 에서 notification service extension 을 선택합니다 product name에 적절한 이름을 입력합니다 본 가이드에서는 flarelanenotificationserviceextension 으로 정의하겠습니다 language 는 가능하면 swift 를 권장합니다 cancel을 클릭하여 별도의 scheme은 활성화하지 않도록 합니다 이후 이번에 만든 notification service extension target 의 minimum deployments 버전을 현재 사용 중인 메인 앱 target의 버전 과 동일하게 설정합니다 5 3 app group 설정 본 앱과 extension 간 데이터 동기화를 위해서는 app group 설정이 필요합니다 target 의 signing & capabilites 으로 들어와 좌상단의 + capability > app groups 를 선택하여 추가합니다 group 번들id flarelane 이라는 이름의 그룹을 추가합니다 나의 번들id는 본 앱의 bundle identifier와 일치해야 합니다 정상적으로 추가 후 해당 app group을 활성화합니다 마찬가지로 이전에 만든 extension 에서도 동일한 이름의 app group을 추가하고 활성화합니다 다음으로 ios 디렉토리 내 podfile 을 열고 다음과 같이 추가합니다 podfile // 파일 최하단의 아래 줄 추가 // 앞서 입력한 extension의 product name을 target 이름으로 설정합니다 target 'flarelanenotificationserviceextension' do pod 'flarelane', '1 7 3' end pod install 를 실행하여 sdk 설치를 완료합니다 다시 xcode를 실행하여 생성한 extension 파일을 수정합니다 자동으로 채워진 코드들을 지우고 플레어레인이 제공하는 클래스를 상속하기만 하면 됩니다 swift(norificationservice swift) import flarelane class notificationservice flarelanenotificationserviceextension { } objective c(notificationservice h/ m) // notificationservice h @import flarelane; @interface notificationservice flnnotificationserviceextension @end // notificationservice m \#import "notificationservice h" @implementation notificationservice @end 6\ 초기화 코드 작성 메인 app(ex app tsx)에 다음 초기화 코드를 입력합니다 프로젝트 id는 콘솔의 \[프로젝트] 페이지에서 확인할 수 있습니다 플레어레인 sdk가 제공하는 함수 리스트는 mobile sdk reference docid 0st qxl4eklp4f9cf wrp 에서 확인할 수 있습니다 app tsx import flarelane from '@flarelane/react native sdk'; // 알림 권한 팝업 타이밍을 제어하려면 2번째 파라미터를 false로 설정 후 적절한 시점에 subscribe() 함수 실행 flarelane initialize('project id', true); 7\ 테스트 여기까지 모두 완료하셨으면 앱 빌드, 실행 시 자동으로 플레어레인 전체 기기 리스트에 추가 됩니다 실제 배포 전, 푸시를 실제 발송하여 기기에 잘 오는지, 푸시 클릭 시 통계에 잘 잡히는지 반드시 직접 확인하시기 바랍니다 fcm 등 푸시 솔루션을 병행 사용하고 있는 경우 ios swizzling 비활성화 docid\ oicb cwf2jch il2ivvcv 를 참고하여 몇 가지 작업을 추가해야합니다 8\ 유저id 연동 앱 설치 시 플레어레인에 생성된 기기는 '익명의 기기'이며 고객사가 별도로 관리하는 고유한 유저 id docid\ mqtr5dt6qq9vezi2uifkj 를 연동함으로써 플레어레인의 기기와 고객사의 유저id를 매칭할 수 있습니다 유저id가 연동되어있으면 많은 이점이 있습니다 회원과 비회원을 구분할 수 있고, 고객사는 언제든지 유저id를 기준으로 푸시 알림 발송이 가능하기 때문에 초기 연동시 권장드리고 있습니다 보통 유저가 회원가입이나 로그인 성공 시, setuserid 함수를 통해 유저id를 연동합니다 js(reactnative) flarelane setuserid("user id"); (심화) 추가 연동 공통 자동 url 처리 플레어레인은 기본적으로 푸시 알림 클릭 시 https, 딥링크 등 url에 대해 자동 처리를 지원 하고 있습니다 만약 별도의 클릭 핸들러 구현이 필요한 경우 url 자동 처리 비활성화 docid\ tfnl7622eziigli2qdvli 를 참고하세요 인앱메시지(팝업) 노출 인앱메시지(팝업) docid\ zdbogv5ia1pgrm2h bcvv 를 참고하여 개발자가 직접 팝업이 노출될 타이밍에 코드 1줄(displayinapp) 을 추가합니다 android 알림 색상 설정 values/strings xml \<resources> \<! 알림 색상 변경 > \<string name="flarelane notification accent color">#bc0000\</string> \</resources> 알림 채널 설정 android 알림 채널 설정 docid\ ek3d6ady7g4gxlt dsgo1 을 참고하여 우리 서비스에 적합한 안드로이드 알림 채널 설정을 합니다 알림 아이콘 설정 android 알림 아이콘 설정 docid\ xfs4hssdyjettdxhjyl2d 을 참고하여 아이콘 애셋 세팅을 합니다 기타 리소스 가이드 mobile sdk reference docid 0st qxl4eklp4f9cf wrp react native sdk docid\ z3dveifiu5agsxuajw08v