[RN Library 📚] rn에서 푸시알림 보내기! firebase cloud messaging FCM 세팅하기

자네! 이번 업무는 rn에 푸쉬알림을 세팅하는 걸세
..
.. 오케이 ...

firebase에서 지원하는 푸시알림 기능인 cloud messaging을 세팅해보자. 진쫘 솔찍히 이거 세팅 테스트하면서 내 명줄이 조금 줄어든거 같다.
ios의 경우는 내 경험으로 앱 스토어에 배포된 경우에 푸시알림이 제대로 작동하는 듯하다. 만약 아니라면, 댓글로 강한 반박 부탁한다.

🥕 목차

1. Install
2. iOS 푸시메시지 활성화
3. fcm 수신 받기
4. iOS 푸시메시지 이미지 보이게 하기
5. iOS 푸시메시지 이미지 세팅 후 Provisioning Profile 생성하기

참고사이트

rn FCM 문서
rn FCM api 문서

🥕 1. Install

fcm을 세팅하려고 하는 당신, firebase의 @react-native-firebase/app 정도는 이미 설치가 되어있겠죠?
android는 간단한 편인데, ios는 Noti 세팅이 android에 비해 어려운 편인데, 마음의 준비는 되어있으시겠죠?
ios의 개발자 아이디도 있겠죠? ios 개발자 계정 결제도 해놨을 거구요?
ios Bundle ID도 있을거예요? 위에서 말했듯 앱스토어에 배포도 해놔있겠죠?
ios provisioning profile도 있을거예요? 맞죠?
그런 상황을 전제로 시작합시다.

npm i @react-native-firebase/messaging

cd ios/ && pod install

🥕 2. iOS 푸시메시지 활성화

우선 ios가 android에 비해 복잡한 편이니 ios부터 마스터 하자.
그러면 안드로이드도 잘 작동하고 있을 테니 말이다.

참고: https://rnfirebase.io/messaging/usage/ios-setup

---

ios 푸시메시지를 활성화 하려면 아래 단계가 필요하다.

1. xcode 수정하기
2. APN key 생성 (apple push notification)
3. APN과 FCM 연결
4. Identifiers 수정
5. Profile 수정

1. xcode 수정하기

(1) Signing & Capabilities 탭에서 Capability를 누른다.

(2) Background Modes와 Push Notifications를 활성화 시키고, Background Modes는 아래와 같이 체크한다.

2. APN key 생성 (apple push notification)

(1) Certificates, Identifiers & Profiles로 이동해서 진행한다.

(2) Identifiers와 Profiles, Keys를 수정할거다.

(3) key 등록하기
keys 탭으로 이동해서, 새로운 키를 생성한다. 나는 이번 푸시 알림을 하기 전에 key를 생성한 적은 없고 이번이 처음 생성한 key 였다.
key name은 대충 FCM APNs Key로 지었고,
Apple Push Notifications service를 눌러서 continue를 누른다. 그 다음 페이지는 파일을 다운로드 할 수 있게 되어 있고, key Id를 보여준다. 다운로드는 한번 밖에 못하므로 잘 관리해둔다.
솔직히 잘 못관리해서 삭제 되어도 다시 생성하는 건 어렵지 않다.

3. APN과 FCM 연결

firebase와 생성한 APN 키를 연결해보자
프로젝트 설정 > 클라우드 메시징으로 이동하자.

거기서 iOS 앱 구성 > APN 인증 키 에 아까 다운로드 한 파일을 올리면 된다.
key ID도 같이 적어주고, 팀 ID는 프로젝트에 이미 설정 되어 있는 팀 ID가 가져와 진다.

4. Identifiers 수정

Certificates, Identifiers & Profiles > Identifiers에 들어가서 Edit을 눌러 수정을 해보자.
Capabilities 아래에 Push Notifications를 활성화 하고, save를 눌러 마무리 하자.
Push Notifications 옆에 Edit이라고 인증서를 추가 할 수 있는 버튼이 있는데, 없어도 아무 문제 없다. 건들이지 않아도 아무 상관없다.

5. Profile 수정

Identifiers를 수정했으니, Certificates, Identifiers & Profiles > Profiles 로 들어가면 EXPIRATION이 Invalid 되어있을 것이다. Profile들을 Edit, save를 해줘서 새롭게 갱신 해준다.
물론 xcode에서의 provisioning profile도 새롭게 다운로드 해줘야 겠지!

이것이 apple developer console에서 해야하는 전부!

🥕 3. fcm 수신 받기

ios, android와 코드가 같기 때문에 같이 수신을 받아보자.

index.js 수정

// index.js
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import App from './App';

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

AppRegistry.registerComponent('app', () => App);

위의 setBackgroundMessageHandler 함수는 앱이 active 되어있지 않을때 작동한다.
단, android에서만 작동하고, ios에서는 console 값이 나오지 않는다. 이 함수가 없으면 warning이 뜨기 때문에 꼭 추가해놓자.

권한 요청

import {useEffect} from 'react';
import messaging from '@react-native-firebase/messaging';

function CloudMessaging() {
  useEffect(() => {
    requestUserPermission();
  }, []);

  async function requestUserPermission() {
    const authorizationStatus = await messaging().requestPermission();
    // 권한상태 (-1: 요청 안함, 0: 거부, 1: 수락, 2: 임시권한)

    switch (authorizationStatus) {
      case 0:
        checkToken();
        break;
      case 1:
        // 토큰 요청
        checkToken();

        // 앱 꺼져있을 때
        messaging()
          .getInitialNotification()
          .then((remoteMessage) => handleCloudMsg(remoteMessage));

        // background에서만 작동
        messaging().onNotificationOpenedApp((remoteMessage) => {
          handleCloudMsg(remoteMessage);
        });
        break;
      default:
        break;
    }
  }

  // 토큰 요청: 추후 필요할 예정
  function checkToken() {
    messaging()
      .getToken()
      .then((data) => {
        console.log('token:', data, messaging().apnsToken);
      });
  }

  async function handleCloudMsg(remoteMessage) {
    if (remoteMessage) {
      if (remoteMessage.data.articleId){
      	// 내가 원하는 액션이 작동하게 하기
      }
    }
  }

  return null;
}

export default CloudMessaging;

앱이 아예 꺼져있을 때는 getInitialNotification 함수로
앱이 background에 있을 때는 onNotificationOpenedApp 함수로
cloud messaging 데이터를 수신 받게 했다.

이렇게 firebase console 페이지의 cloudmessaging을 이용해서 테스트 해보면
성공적으로 된다.
아놔 이렇게 글로 쓰니까 엄청 간단해 보이는데, 엄청난 삽질의 결과물이었다.
내일 오전에 운영팀이랑 테스트 있는데, 오류 없길..😞

---

(추가)
+ios 테스트 중, 푸시알림에 이미지가 들어가지 않는 점 발견.
ios 푸시알림에서 이미지 보이게 하는 작업 추가

🥕 4. iOS 푸시메시지 이미지 보이게 하기

참고: https://rnfirebase.io/messaging/ios-notification-images

안드로이드에서는 따로 설정할 필요 없고, ios에서만 설정해주면 된다.
xcode에서 작업을 한다.

1. xcode를 실행해서 File > New > Target... 을 누른다.
   

2. 거기서 Notification Service Extension을 찾아서 선택한다.
   

3. 뭔가 채워야 하는 화면이 뜰거다. 거기서 Product Name과 Language를 수정해주면 된다. firebase 문서에서 Product Name를 ImageNotification으로 예시를 들길래, 고대로 했고, Language는 swift가 default인데 Objective-c로 수정했다.
   

4. xcode의 왼쪽 navigator에서 podfile을 엽니다.
   

제일 하단에 아래 코드를 붙여 넣습니다.
VERSION_NUMBER 부분은 Podfile.lock 파일에 - Firebase/Messaging (~>를 검색하면 그 다음 숫자를 적어 넣으면 된다. 나는 7.4.0이었다.
수정하고 pod install을 새로 해주어 pod 파일이 반영되게 한다.

target 'ImageNotification' do
  pod 'Firebase/Messaging', '~> VERSION_NUMBER' # eg 6.31.0 
end

5. xcode의 왼쪽 navigator에서 ImageNotification > NotificationService.m을 엽니다.
   

6. 코드 추가 및 수정하기

#import "NotificationService.h" // 원래 있던 코드
#import "FirebaseMessaging.h" // 추가하기

...

// 아래에 원래 있던 코드 삭제하기
- self.bestAttemptContent.title = [NSString stringWithFormat:@"%@ [modified]", self.bestAttemptContent.title];
    
- self.contentHandler(self.bestAttemptContent);

// 위 코드 삭제하고, 아래 코드로 추가하기
[[FIRMessaging extensionHelper] populateNotificationContent:self.bestAttemptContent withContentHandler:contentHandler];

푸시 알림을 날리면 이미지가 이쁘게 들어간다.

7. (App Store 배포 시) General > Identity > Version, Build 같게하
   여기서 하나 더 추가작업이 필요한데요.
   
   xcode의 TARGETS에 ImageNotification이 생겼을텐데,
   본인 프로젝트 TARGET과
   General > Identity > Version과 General > Identity > Build를 같게 해야 한다. 사실 이건 App Store로 배포시에 필요한 작업이다. TestFlight로 보낼 때 두 버전이 맞지 않으면 Warning이 뜬다.
   잊지말길

---

(추가)

iOS 푸시알림 세팅을 하고났더니 AdHoc에서 막혀버렸다. 본글에 수정을 해서 추가를 하기로 하지만, 따로 글을 작성해 놓기도 했다.
https://velog.io/@dody_/RN-에러노트-ios-notification-service-extension-세팅-후-provisioning-profile이-필요하다
아래에 가서 확인해봐도 되고, 아래 글을 참고해도 된다.

🥕 5. iOS 푸시메시지 이미지 세팅 후 Provisioning Profile 생성하기

위에서 쭉 따라 내려오다가, adhoc으로 export 하려 하면 아래와 같이 나온다.

원래 oheadline.app의 provisioning profile로 adhoc이 되었었는데,
ImageNotification.appex의 provisioning profile도 select 해야된다.
하나가 더 추가 됐다.
문서에는 관련 설명이 없어서 조금 헤맸는데,

구글에 ios notification service extension provisioning profile를 쳐보니
다양한 사람들이 인증서, 프로비저닝 프로파일을 새로 만들어야 하는지에 대해 질문을 많이 던졌고,
그에 대한 답으로 아래 글을 발견하게 되었다.
https://stackoverflow.com/questions/47466759/do-i-require-distribution-provisioning-profile-for-notification-service-extensio

Identifier, provisioning profile을 새로 만들어야 하는 듯하다.

1. apple developer > Identifiers 에서 새로운 Identifiters을 만든다. com.XXX.XXX.ImageNotification으로 생성하면 된다.
2. apple developer > Profiles 에서 위에서 만든 Identifier을 가지고 adhoc의 기능을 가진 provisioning profile을 만들면 된다.
3. adhoc 때 필요했던 ImageNotification.appex의 select profile에 지금 만든 인증서를 다운로드해서 넣어주면 된다.

잘 export 해서 app distribution으로 확인해보니 앱도 잘 설치고되고 알림에 이미지도 잘 들어가더라!

진짜진짜 제발 끝🥕🥕🥕