ExpoKit iOS FCM

9 min readJul 25, 2019

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

APNS Key를 준비합니다. APNS Key가 없다면 아래 링크에 APNS Key 만드는 방법이 있습니다.

APNS Key 파일 만들기

APNS Key를 FCM(Firebase Cloud Message)에 등록하면 Firebase에서 앱으로 푸쉬 메세지를 보낼 수 있습니다. 이번 시간에는 APNS Key를 만들어보겠습니다.

medium.com

Firebase에 접속합니다.

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

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

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

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

계속 버튼을 선택합니다.

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

iOS 추가를 선택합니다.

iOS 번들 ID를 입력합니다. iOS 번들 ID는 https://developer.apple.com/account/resources/identifiers/list 에서 현재 설정하는 Identifier를 입력합니다.

입력을 완료했다면 앱 등록 버튼을 선택합니다.

GoogleService-info.plist 파일을 다운로드 후 보관합니다.

프로젝트 내의 ios폴더에서 확장자가 xcworkspace인 파일을 실행합니다.

Xcode가 열리면 GoogleService-info.plist 파일을 expokit 폴더 아래에 복사해서 붙여넣습니다.

GoogleService-info.plist 파일을 드래그 앤 드랍 할 때에 Copy items if needed 옵션을 선택합니다.

GoogleService-info.plist 파일이 expoKit 폴더 아래에 붙여넣기 된 것을 확인합니다.

Podfile을 열어서 pod ‘React’ 위에 pod ‘Firebase/Messaging’ 을 추가합니다.

pod 'Firebase/Messaging'

터미널을 열어서 프로젝트의 ios폴더로 이동 한 다음, Firebase Cloud Message 네이티브 모듈을 설치합니다.

pod install

프로젝트 위치에서 react-native-firebase 모듈을 설치합니다. 5.5.5 버전에서 버전충돌 이슈가 있어서 5.5.4로 진행합니다.

npm install react-native-firebase@5.5.4

설치가 완료되면 Xcode와 Dependecy를 연결합니다.

react-native link react-native-firebase

Xcode로 돌아가서 AppDelegate.m 파일을 엽니다.

@import Firebase;[FIRApp configure];

위 두 개의 설정을 스크린샷에 표시해 놓은 위치에 각각 추가합니다.

Build Target Device를 확인 한 다음 플레이 버튼을 눌러 빌드를 시작합니다. 빌드가 정상적으로 되는지 확인합니다.

APNS Key를 Firebase에 업로드 하겠습니다.

Firebase 프로젝트 상세화면에서 설정(톱니바퀴)를 선택한 다음 클라우드 메시징을 선택합니다.

업로드 버튼을 선택합니다.

찾아보기를 통해 APNS Key를 업로드 합니다. 그리고 키 ID와 팀 ID하고 업로드 버튼을 선택합니다.

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

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)
})
}})