React Native SDK

실제 연동이 완료된 예시를 참고하실 수 있도록 샘플 코드 가 준비되어 있습니다 sdk 버전 업데이트 시 react native sdk release notes docid\ zbc5kq0nrnh6w463tr2rt 를 반드시 참고하세요 모든 작업이 완료되면 연동 완료 체크리스트 docid 5gzwmfpwnsype5nwtlmyd 를 확인하여 정상 동작 여부를 확인합니다 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을 추가하고 활성화합니다 다음으로 xcode 종료 후 ios 디렉토리 내 podfile 을 열고 다음과 같이 추가합니다 podfile // 파일 최하단의 아래 줄 추가 // 앞서 입력한 extension의 product name을 target 이름으로 설정합니다 target 'flarelanenotificationserviceextension' do pod 'flarelane', '1 9 0' end pod install 를 실행하여 sdk 설치를 완료합니다 5 4 appdelegate 메소드 추가 application(\ didregisterforremotenotificationswithdevicetoken ) 대응 메소드 추가 switft(appdelegate swift) import flarelane class appdelegate uiresponder, uiapplicationdelegate { func application( application uiapplication, didregisterforremotenotificationswithdevicetoken devicetoken data) { // 2 flarelaneappdelegate shared application(application, didregisterforremotenotificationswithdevicetoken devicetoken) } } objective c(appdelegate m) @import flarelane; @implementation appdelegate \ (void)application (uiapplication )application didregisterforremotenotificationswithdevicetoken (nsdata )devicetoken { // 2 \[\[flarelaneappdelegate shared] application\ application didregisterforremotenotificationswithdevicetoken\ devicetoken]; } 5 5 unusernotificationcenterdelegate 메소드 추가 appdelegate에 unusernotificationcenterdelegate 지정 usernotificationcenter(\ willpresent\ withcompletionhandler ) 대응 메소드 추가 대응 메소드 추가 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) } }// appdelegate h \#import \<usernotifications/usernotifications h> @interface appdelegate uiresponder < , unusernotificationcenterdelegate> @end // appdelegate m @implementation appdelegate \ (bool)application (uiapplication )application didfinishlaunchingwithoptions (nsdictionary )launchoptions { // 1 \[\[unusernotificationcenter currentnotificationcenter] setdelegate self]; } // 2 \ (void)usernotificationcenter (unusernotificationcenter )center willpresentnotification (unnotification )notification withcompletionhandler (void (^)(unnotificationpresentationoptions))completionhandler { \[\[flarelanenotificationcenter shared] usernotificationcenter\ center willpresentnotification\ notification withcompletionhandler\ completionhandler]; } // 3 \ (void)usernotificationcenter (unusernotificationcenter )center didreceivenotificationresponse (unnotificationresponse )response withcompletionhandler (void (^)())completionhandler { \[\[flarelanenotificationcenter shared] usernotificationcenter\ center didreceivenotificationresponse\ response withcompletionhandler\ completionhandler]; } @end 5 6 unnotificationserviceextension 메소드 추가 didreceive(\ withcontenthandler ) 대응 메소드 추가 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() } }@import flarelane; @implementation notificationservice \ (void)didreceivenotificationrequest (unnotificationrequest )request withcontenthandler (void (^)(unnotificationcontent nonnull))contenthandler { // 1 // 플레어레인에서 발송한 푸시는 플레어레인의 메소드만 동작하도록 분기 처리합니다 if (\[\[flarelanenotificationserviceextensionhelper shared] isflarelanenotification\ request]) { \[\[flarelanenotificationserviceextensionhelper shared] didreceive\ request withcontenthandler\ contenthandler]; } else { // } } \ (void)serviceextensiontimewillexpire { // 2 \[\[flarelanenotificationserviceextensionhelper shared] serviceextensiontimewillexpire]; } 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\ 유저id 연동 앱 설치 시 플레어레인에 생성된 기기는 '익명의 기기'이며 고객사가 별도로 관리하는 고유한 유저 id docid\ mqtr5dt6qq9vezi2uifkj 를 연동함으로써 플레어레인의 기기와 고객사의 유저id를 매칭할 수 있습니다 유저id가 연동되어있으면 많은 이점이 있습니다 회원과 비회원을 구분할 수 있고, 고객사는 언제든지 유저id를 기준으로 푸시 알림 발송이 가능하기 때문에 초기 연동시 권장드리고 있습니다 보통 유저가 회원가입이나 로그인 성공 시, setuserid 함수를 통해 유저id를 연동합니다 js(reactnative) flarelane setuserid("user id"); 8\ 추가 연동 가이드 공통 자동 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