React Native에서 push notification 구현하기 - FCM

프론트엔드 웹 개발만 주구장창하다가 갑자기 안드로이드 RN 백업 + 백엔드 포지션을 맡게 되어서 엄청나게 정신이 없다. 뒤돌면 까먹으니까 지금 하나하나 작성해둬야겠다. 앱 내에서 특정 상황에 push 알림을 보내야 하는 상황이 있고 그 부분을 구현해야 한다. 일단 서버를 직접 구현하여 알림을 보내려면 앱<-> 서버 연결이 지속적으로 유지가 되어야 하는데, FCM을 사용하면 앱에서 서버에 연결하지 않아도 기기와의 내부 연결을 통해 메시지를 보낼 수 있다.

 

(https://maejing.tistory.com/entry/Android-FCM%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%B4-Push-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 이 블로그가 도움이 많이 되었다)

 

참고한 공식 문서들

https://firebase.google.com/docs/cloud-messaging

Firebase 클라우드 메시징  |  Firebase 문서

https://rnfirebase.io/messaging/usage

Cloud Messaging | React Native Firebase

 

---

FCM (firebase cloud messaging)

메시지를 안정적으로 무료 전송할 수 있는 크로스 플랫폼 메시징 솔루션

• 알림 메시지 / 데이터 메시지 전송
• 다양한 메시지 타켓팅 (단일 기기, 기기 그룹, 주제를 구독한 기기 등 3가지 방법)
• 클라이언트 앱에서 메시지 전송

기능 들이 존재한다.

FCM 아키텍쳐 개요 (출처 : firebase fcm 공식문서)

 

 

notification에는 크게 2가지 종류가 있는데 1) foreground notification 2) background notification이 있다.

foreground notification

현재 앱이 열려있고 돌아가고 있는 상태에서 알림을 받을 때에 해당한다

 

background notification

앱이 현재 열려있지 않을 때 전송되는 알림이다. 

 

 

현재 프로젝트에서는 앱이 켜져 있을 때에도 알림이 와야 한다. (맞나?) 따라서 포그라운드, 백그라운드 경우 모두 처리가 되어야 한다.

 

---

 

FCM에서 보낼 수 있는 메시지는 알림 / 데이터 메시지 2종류다.

알림 메시지의 경우 클라이언트 앱을 대신하여 FCM이 알림 표시 작업을 처리해준다. 이번 프로젝트에서는 이걸 사용하려고 한다. 

 

전송 방법의 경우 공식문서에 다음과 같이 나와있다.

1. Cloud Functions 또는 앱 서버와 같은 신뢰할 수 있는 환경에서 Admin SDK 또는 FCM 서버 프로토콜을 사용하여 notification 키를 설정합니다. 선택사항으로 데이터 페이로드를 추가할 수 있습니다. 항상 축소형입니다.
2. 디스플레이 알림의 예시를 보고 요청 페이로드를 전송하세요.
3. 알림 작성기 사용: 메시지 본문, 제목 등을 입력하고 전송합니다. 커스텀 데이터를 제공하여 선택사항인 데이터 페이로드를 추가합니다.

 

디스플레이 알림의 예시 화면으로 가보면 꽤 다양한 종류가 존재한다!