ExpoKit Android FCM

9 min readSep 4, 2019

ExpoKit에서는 Push 파이프라인을 직접 구현해야 합니다. 이번 시간에는 FCM(Firebase Cloud Message)에서 메세지를 보낸 다음 ExpoKit으로 개발한 Android 앱에서 푸쉬 메세지를 수신하겠습니다.

Firebase에 접속합니다.

https://firebase.google.com/?hl=ko

시작하기 버튼을 선택합니다.

프로젝트 추가를 선택합니다.

프로젝트 이름을 입력한 다음 정보를 확인하고 프로젝트 만들기 버튼을 선택합니다.

계속 버튼을 선택합니다.

왼쪽메뉴 바에서 Cloud Message을 선택합니다.

Android를 선택합니다.

안드로이드 패키지이름 과 앱 닉네임(선택사항)을 입력한 다음 앱 등록을 선택합니다.

google-service.json 파일을 다운로드하고 Android Studio에서 프로젝트의 android/app 폴더안에 복사합니다.

google-service.json 파일을 다운하고 다음 버튼을 눌러 다음을 진행하지 않습니다. react-native-firebase 모듈을 사용해서 개발함으로 Firebase 가이드와 설정이 맞지 않습니다. 설정 파일만 app 폴더 아래에 저장합니다.

npm install react-native-firebase@5.5.4react-native link react-native-firebase

react-native-firebase 모듈을 설치하고 링크합니다.

Android Studio를 실행합니다.

WARNING: API ‘variant.getExternalNativeBuildTasks()’ is obsolete and has been replaced with ‘variant.getExternalNativeBuildProviders()’.
It will be removed at the end of 2019.

경고가 발생한다면

android/app/build.gradle 을 열어서

classpath 'io.fabric.tools:gradle:1.30.0'

io.fabric.tools:gradle 의 버전을 1.30.0 으로 변경합니다.

상단 메뉴 Sync 아이콘을 선택한 다음 경고가 없어졌는지 확인합니다.

android/app/build.gradle 파일에

implementation "com.google.firebase:firebase-messaging:18.0.0"
implementation 'me.leolin:ShortcutBadger:1.1.21@aar' // <-- Add this line if you wish to use badge on Android

android/app/src/main/java/host.exp.exponent/MainApplication.java 을 엽니다.

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;

new RNFirebaseMessagingPackage(),
new RNFirebaseNotificationsPackage()

스크린샷을 참고해서 위의 소스를 추가합니다.

android/app/src/main/AndroidManifest.xml 파일을 엽니다.

<application ...>

  <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
    <intent-filter>
      <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
  </service>

</application>

<service> 부분을 <application> 태그안에 추가합니다. 상단 메뉴아이콘의 Sync를 실행합니다.

이제 푸쉬 메세지를 받기 위한 설정이 끝났습니다. 다음은 앱에서 푸쉬 권한과 푸쉬 토큰을 획득하겠습니다.

import firebase from 'react-native-firebase';componentWillMount() {firebase.messaging().hasPermission().then(enabled => { // 이미 푸쉬 권한이 있다면
  
  if(enabled) {firebase.messaging().getToken().then(token => { //토큰을 가져온다.
      console.log("푸쉬 토큰", token)this.notificationListener = 
      firebase.notifications().onNotification((notification) => {
      //푸쉬가 앱에 수신되면 동작하는 이벤트 핸들러
      })
    })} else { //푸쉬 권한을 획득한 적이 없다면//푸쉬 권한을 요청
    firebase.messaging().requestPermission().then(() => {
      firebase.messaging().getToken().then(token => {
      
      console.log("푸쉬 토큰", token)
    })}).catch(error => {
  console.log(error)
  alert("Error", error)
})
}})