react-native-firebase v6 fcm 푸시 구현 방법

반응형

목차

개요

react-native-firebase v6 fcm은 아래 링크를 참조해서 구현했습니다.

rnfirebase.io/messaging/usage

그런데 위 공식문서에는 빠진 부분이 있고 잘못된 부분도 있어서 블로그로 정리했습니다.

 

react-native-firebase v5는 모든 모듈(admob, analytics, crashlytics 등)을 포함하고 있어서 앱이 용량이 크고 무거웠습니다. 푸시를 사용하기 위한 설정도 다소 복잡했습니다. 하지만 v6에서는 필요한 모듈만 사용할 수 있고 설정도 무척 간편해졌습니다.

 

먼저 react-native에 대한 기본지식이 있고 컴퓨터에 react-native 개발환경이 구축되어 있음을 전제로 하겠습니다. 그리고 iOS에서 푸시를 받기 위한 설정과 firebase 콘솔에 프로젝트 설정이 모두 되어 있다고 가정하겠습니다. 

 

혹시 iOS에서 푸시를 받기 위한 설정을 알고 싶으시면 다음 링크를 참조하세요.

rnfirebase.io/messaging/usage/ios-setup

 

 

라이브러리 설치 및 준비

1> 먼저 터미널에서 다음 명령어를 입력하여 "@react-native-firebase/app"과 "@react-native-firebase/messaging" 모듈을 설치하세요.

 

yarn add @react-native-firebase/app

yarn add @react-native-firebase/messaging

 

2> 그 다음 ios 폴더로 이동하여 설치를 계속합니다.

 

cd ios/ && pod install

 

 

안드로이드 프로젝트 소스 수정

프로젝트모듈의 build.gradle

googlePlayServicesVersion = "17.0.0"와 classpath("com.google.gms:google-services:4.3.3") 추가 

 

buildscript {
    ext {
        buildToolsVersion = "29.0.2"
        minSdkVersion = 16
        compileSdkVersion = 29
        targetSdkVersion = 29

        // NOTE: using any of them will work
        googlePlayServicesVersion = "17.0.0"
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.5.3")
        classpath("com.google.gms:google-services:4.3.3")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

 

app  모듈의 build.gradle

맨상단에 apply plugin: "com.google.gms.google-services" 추가 

 

apply plugin: "com.android.application"
apply plugin: "com.google.gms.google-services"

import com.android.build.OutputFile

 

 

iOS 프로젝트 소스 수정

AppDelegate.m 

#import <Firebase.h> 와 

  if ([FIRApp defaultApp] == nil) {

     [FIRApp configure];

     [RNFirebaseNotifications configure];

   }

추가

 

//FCM
#import <Firebase.h>

...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  
  
  if ([FIRApp defaultApp] == nil) {
     [FIRApp configure];
     [RNFirebaseNotifications configure];
   }

 

 

React Native 프로젝트 소스 수정

index.js

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




//백그라운드에서 푸시를 받으면 호출됨 

messaging().setBackgroundMessageHandler(async remoteMessage => {

console.log('Message handled in the background!', remoteMessage);

});

 

App.js

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

...



componentDidMount() {

// FCM 권한 요청 

this.requestUserPermissionForFCM()

}

 

/**

* fcm 푸시 처리

*/



requestUserPermissionForFCM = async () => {

const authStatus = await messaging().requestPermission();

const enabled =

authStatus === messaging.AuthorizationStatus.AUTHORIZED ||

authStatus === messaging.AuthorizationStatus.PROVISIONAL;

 

if (enabled) {

const token = await messaging().getToken();



//푸시 토큰 표시 

console.log('fcm token:', token);

console.log('Authorization status:', authStatus);

this.handleFcmMessage();

} else {

console.log('fcm auth fail');

}

}

 

handleFcmMessage = () => {

 

//푸시를 받으면 호출됨 

const unsubscribe = messaging().onMessage(async remoteMessage => {

Alert.alert('A new FCM message arrived!', JSON.stringify(remoteMessage));

});

 

//알림창을 클릭한 경우 호출됨 

messaging().onNotificationOpenedApp(remoteMessage => {

console.log(

'Notification caused app to open from background state:',

remoteMessage.notification,

);

 

});

 

}

 

 

완료

이제 firebase 콘솔에서 테스트 메시지를 날려보세요. 폰에서 푸시를 받으면 터미널에 로그가 표시될 것입니다.