React Native 앱에서 푸시 알림을 구현하면 적시 업데이트 및 알림을 제공함으로써 사용자 참여를 크게 향상시킬 수 있습니다. Firebase Cloud Messaging (FCM)은 플랫폼 전반에 푸시 알림을 관리하기 위해 신뢰할 수 있고 쉽게 통합 솔루션을 제공합니다. 이 가이드는 Firebase를 사용하여 React Native에서 푸시 알림을 구현하는 단계를 통해 안내합니다.

관련 상품

  • React Native 프로젝트는 Expo 또는 React Native CLI로 설정됩니다.
  • Firebase 콘솔에서 생성 된 Firebase 프로젝트
  • JavaScript 및 React Native의 기본 지식
  • Firebase SDK는 프로젝트에서 설치

Firebase 설정

먼저 Firebase 프로젝트를 만들고 앱을 추가하십시오. 구성 파일을 다운로드하십시오.

Android용

Google-services.json 파일을 다운로드하고 프로젝트의 android/app 디렉토리에 배치하십시오. Firebase SDK를 프로젝트 의존성에 추가하십시오.

iOS용

GoogleService-Info.plist 파일을 다운로드하고 Xcode 프로젝트에 추가하십시오. CocoaPods를 통해 Firebase SDK를 설치하십시오.

설치 의존

필요한 Firebase 패키지를 설치하십시오.

  • React Native CLI:]

실행:

  • 엑스포 관리 워크플로우:

Expo Firebase SDK를 사용하거나 네이티브 모듈을 위한 워크플로를 바꿉니다.

토큰을 요청

React Native 코드에서, 알림을 요청하고 디바이스 토큰을 검색할 수 있습니다.

예:

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
 const authStatus = await messaging().requestPermission();
 const enabled =
 authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
 authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 if (enabled) {
 console.log('Authorization status:', authStatus);
 getFcmToken();
 }
}

async function getFcmToken() {
 const fcmToken = await messaging().getToken();
 if (fcmToken) {
 console.log('FCM Token:', fcmToken);
 // Send token to your server for push notifications
 }
}

requestUserPermission();

관련 문의

전방 알림 및 응답을 처리하는 청취자 설정:

messaging().onMessage(async remoteMessage => {
 console.log('A new FCM message arrived!', remoteMessage);
 // Show local notification or update UI
});

messaging().setBackgroundMessageHandler(async remoteMessage => {
 console.log('Message handled in the background!', remoteMessage);
 // Handle background message
});

푸시 알림 전송

Firebase Cloud Messaging API 또는 Firebase 콘솔을 사용하여 알림을 보내십시오. 예 페이로드 :

{
 "to": "",
 "notification": {
 "title": "Hello!",
 "body": "This is a push notification."
 }
}

Firebase Cloud Messaging REST API 또는 Firebase 콘솔을 통해 메시지를 보내십시오.

관련 기사

React Native의 Firebase와 푸시 알림 통합은 Firebase, 요청 권한을 설정하고, 장치 토큰을 검색하고, 메시지를 처리하는 것입니다. Proper 구현은 사용자 참여를 개선하고 앱 동적 및 대화를 유지 할 수 있습니다.