Sendbird Chat을 사용하여 React Native 앱에서 푸시 알림 구현 방법
소개: 푸시 알림이란 무엇이며, 왜 중요한가요?
푸시 알림은 애플리케이션이 사용자에게 전송하는 클릭 가능한 자동화된 팝업 메시지입니다. 기기가 유휴 상태이거나 백그라운드에서 앱이 실행 중일 때 메시지가 즉시 기기로 전달됩니다. 푸시 알림은 다음과 같은 이유로 중요합니다.
- 사용자의 활동이나 관심분야와 관련된 중요한 정보, 알림, 뉴스를 전달합니다.
- 모바일 앱 참여 지수 상승
- 추천 콘텐츠 선보이기
- 전환율을 높이는 타겟 관련 트래픽 유도
- 개인화되고 시기적절한 관련 콘텐츠로 원활한 사용자 경험을 창출하세요.
모바일 푸시 알림 가이드에는 푸시 알림, 장점, 사용 방법에 대해 알아야 할 모든 내용이 포함되어 있습니다.
미국의 평균 스마트폰 사용자는 하루에 45개의 푸시 알림을 받는다는 점에 주목할 필요가 있습니다! RubyGarage에 따르면 푸시 알림을 구현하는 조직은 그렇지 않은 기업에 비해 고객 유지율이 3배 더 높고 참여도가 88% 더 높습니다. 업종, 위치, 유형및 기타 여러 요인에 따라 푸시 알림 가입 및 클릭률에 차이가 있을 수 있지만, 푸시 알림을 구현하는 것에 대한 근거는 명확합니다.
이 튜토리얼에서는 React Native 푸시 알림을 구현하기 위한 단계별 지침을 제공합니다. 하지만 먼저 몇 가지 전제 조건을 살펴보겠습니다.
필요 조건
- Sendbird 계정을 만드세요.
- Sendbird Chat이 React Native 앱에서 제대로 작동하는지 확인하세요.
앱에서 Sendbird 서버로 메시지가 전송되면(JavaScript용 Chat SDK를 통해) 서버는 다음과 통신한다는 점을 기억하세요. FCM. 그런 다음 FCM은 Android 기기에 푸시 알림을 전달하거나 APN과 통신하여 iOS 기기에 푸시 알림을 전달합니다.
React Native 애플리케이션을 위한 푸시 알림
푸시 알림은 JavaScript용 Sendbird Chat SDK를 사용하여 하이브리드 모바일 애플리케이션 사용자(Android 및 iOS)에게 보낼 수 있습니다. 현재 JavaScript SDK의 푸시 알림 기능은 React Native와만 호환됩니다. 이 튜토리얼에서는 FCM(Firebase Cloud Messaging) 및 Sendbird Chat SDK를 사용하여 React Native 앱에서 푸시 알림을 활성화하는 방법에 대한 세부 정보를 제공합니다.
구현 세부정보를 살펴보기 전에 FCM 메시지에 대해 이야기해 보겠습니다. FCM 메시지에는 알림 메시지와 데이터 메시지라는 두 가지 유형이 있습니다. Firebase 문서에 따르면 "알림 메시지에는 사전 정의된 사용자 표시 키 세트와 맞춤 키-값 쌍의 선택적인 데이터 페이로드가 있습니다." 데이터 메시지에는 사용자 정의 키-값 쌍만 포함됩니다. Sendbird는 데이터 메시지를 사용하여 클라이언트 앱이 이러한 맞춤 키-값 쌍으로 구성된 맞춤 메시지 페이로드를 생성할 수 있도록 합니다.
웹 애플리케이션에는 푸시 알림이 지원되지 않습니다. 웹 앱에 대한 푸시 알림을 구현해야 하는 경우 웹후크 이벤트를 사용하여 웹 애플리케이션에 대한 푸시 알림을 구현하는 것이 좋습니다.
시작하기 전에 Firebase 콘솔에 액세스할 수 있는지 확인하세요. 뛰어 들어보세요! 💻
2단계: React Native Firebase 모듈 설치 및 설정 파일 추가
React Native Firebase는 Android 및 iOS 앱 모두에서 모든 Firebase 서비스에 React Native 지원을 제공하는 공식 권장 패키지 컬렉션입니다. 공식 문서의 지침에 따라 React Native 프로젝트에서 Android용 FCM과 iOS용 APN을 구성하세요. 이 단계가 끝나면 Firebase 프로젝트에 Android 및 iOS 앱이 추가되고 React Native 프로젝트에 해당 구성 파일이 추가되어야 합니다.
FCM의 알림 표시 및 처리에 대한 자세한 내용은 React Native Firebase 알림 페이지를 참조하세요.
3단계: Sendbird 서버에 푸시 토큰 등록
특정 클라이언트 앱에 알림 메시지를 보내려면 FCM에는 클라이언트 앱 인스턴스에서 발급한 Android 기기용 FCM 등록 토큰과 iOS 기기용 APNs 기기 토큰이 필요합니다. 따라서 Sendbird 서버는 사용자를 대신하여 FCM에 알림 요청을 보내려면 모든 클라이언트 앱 인스턴스의 등록 토큰도 필요합니다. Chat SDK는 이 두 가지 유형의 토큰을 Sendbird 서버에 등록 및 등록 취소할 수 있는 인터페이스를 제공합니다.
아래 코드 조각은 장치 토큰 등록을 보여줍니다.
등록된 푸시 토큰은 대시보드의 ‘사용자 > user_id > 채팅’ 하에 나타납니다.
4단계: 푸시 알림 메시지 수신
기기 토큰이 등록되면 클라이언트 앱 인스턴스는 iOS 또는 Android 플랫폼에 관계없이 FCM 알림 메시지를 수신하고 처리할 수 있습니다. 구현에 대한 자세한 내용은 React Native Firebase 문서의 사용법 페이지를 참조하세요.
JavaScript용 Sendbird Chat SDK는 애플리케이션 상태를 자동으로 감지하지 않으므로 setForegroundState() 및 Sendbird SDK에서 제공하는 setBackgroundState() 메서드를 명시적으로 호출해야 합니다.
React Native Firebase 문서를 검토하여 메시지 수신에 사용 가능한 이벤트 핸들러를 이해하세요. 아래 코드 조각은 수신된 FCM 메시지의 구문 분석을 보여줍니다.
참고: 채널은 사용자가 기기에서 알림을 처리하는 방법을 분류하고 제어할 수 있도록 하는 Android 전용 개념입니다.
FCM 데이터 메시지에서 구문 분석된 데이터 개체에는 아래 JSON 코드에 표시된 대로 키-값 항목 집합이 포함되어 있습니다.
푸시 알림 문제 해결 팁
푸시 알림 문제 해결은 복잡할 수 있습니다. 여기에 이에 대한 몇 가지 팁이 있습니다.
- 개발자가 푸시 알림을 디버그하고 문제를 해결하기 쉽게 하기 위해, 유용하게 사용할 수 있는 테스터 도구를 구축했습니다. 이 도구를 사용하는 방법을 이해하려면 이 튜토리얼을 참조하시고, Sendbird 대시보드를 통해 도구에 접근할 수 있습니다.
- Android 채팅 푸시 알림 문제 해결에 대한 이 종합 가이드를 확인하세요.
- 실패 조건을 디버깅하려면 FCM 오류 코드를 참조하세요.