React Native - Firebase Push Notification, Image 이미지 표시 iOS 환경 세팅

Firebase Push Notification, Images 표시 iOS 환경 세팅

 

번거롭게도 React Native에서 Firebase push 알림을 사용할 때 메시지 텍스트와 함께 이미지를 push 하려면 iOS에서 따로 설정을 해줘야 합니다.

다행히 Android는 따로 설정할 필요 없고, iOS에서만 설정해 주면 됩니다.

 

 

 

 

주로 Xcode에서 설정 작업을 합니다.

설정을 하려는 프로젝트를 Xcode로 실행했다고 가정하여 진행하겠습니다.

 

 

 

 

 

 

1. Xcode를 실행해서 File > New > Target... 을 누릅니다.

 

 

 

 

 

2. Notification Service Extension을 찾아서 선택합니다.

 

 

 

 

 

 

3. Product Name과 Language를 수정해 주면 됩니다. firebase 문서에서 Product Name를 ImageNotification으로, Language는 swift가 default인데 Objective-c로 수정합니다.

 

 

 

 

 

4. Podfile 파일을 열어 아래와 같이 수정 및 추가합니다.

 

    "react-native": "0.66.3",

	...

    "@react-native-firebase/analytics": "^17.5.0",
    "@react-native-firebase/app": "^17.5.0",
    "@react-native-firebase/messaging": "^17.5.0",
    "@react-native-firebase/remote-config": "^17.5.0",

위와 같은 버젼을 따른 설정이니 참고 바랍니다.

pod 'Firebase', :modular_headers => true
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true

...

target 'ImageNotification' do
  use_modular_headers!
  pod 'Firebase/Messaging', '~> VERSION_NUMBER'
end

주의: VERSION_NUMBER 부분은 Podfile.lock 파일에 - Firebase/Messaging (~>를 검색하면 그 다음 숫자를 적어 넣으면 됩니다.

만약 위의 설정이 빌드 오류를 발생시키면 RN 버전과 Firebase 버전에 따라 설정이 다를 수 있으니 아래 스택오브플로우 이슈를 참고하시길 바랍니다.

Swift pods cannot yet be integrated as static libraries FirebaseCoreInternal-library

 

 

 

 

 

 

5. iOS > ImageNotification > NotificationService.m 에 들어가서 코드를 수정합니다.

#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];

 

 

 

 

6. (App Store 배포 시) General > Identity > Version, Build이 같도록 추가작업이 필요합니다.

 

 

 

Xcode의 TARGETS에 위의 과정을 잘 마쳤으면 ImageNotification이 생겼을 텐데,본인 프로젝트 TARGET과 General > Identity > Version과 General > Identity > Build를 같게 해야 합니다.

App Store로 배포시에 필요한 작업입니다. TestFlight로 보낼 때 두 버전이 맞지 않으면 Warning이 뜨니 주의 바랍니다.

 

 

 

 

 

 

 

 

7. 마지막으로 Identifier, provisioning profile을 새로 만들어야 합니다.

Develop - Apple Developer

1. Apple developer > Identifiers에서 새로운 Identifiters을 만들고, com.XXX.XXX.ImageNotification으로 생성하면 됩니다.

2. Apple developer > Profiles에서 위에서 만든 Identifier을 가지고 adhoc의 기능을 가진 provisioning profile을 만들면 됩니다.

 

 

 

아래와 같이 인증이 활성화되는 것을 확인하면 설정 완료입니다.

 

 

 

3. App Store로 배포 시 adhoc 때 필요했던 ImageNotification.appex의 select profile에 Apple developer에서 만든 인증서를 다운로드 및 인포트 해서 넣어주면 됩니다.