FCM 푸시 알림 구현하기 (1) - 설계

참고자료 또는 정보

내 뇌 그리고 구현 경험

---

설계 전

• FCM을 사용하는 방법은 여러가지가 있다. 
• 앱 서버라던지 HTTP 프로토콜이라던지의 방법을 선택해야 한다.
• 제일 간단한 구현을 위해 클라이언트와 백엔드를 설정하고 테스트해보자
• 먼저 일반적으로 클라이언트에서 토픽과 토큰을 가지고 바로 firebase console gui에 들어가 테스트를 진행할 수 있다. 하지만 이렇게 테스트하고 찍먹하기보다 백엔드 서버를 두어 좀 더 개발자답게 해보고자 한다.
• 우리가 프로젝트를 구상하기 전 FCM에 대한 동작원리를 파악해야하고 공식 문서를 참고하는것이 제일 무난하다고 생각한다. 
• FCM에 대한 정보들을 리서치하여 취합하고 방법들을 선택했으면 이제 우리 서버에 맞게 플로우라던지 다이어그램으로 설계를 시작한다. 

 

나는 이렇게 설계를 해보았다. 

FCM과 연결하는 흐름 

내가 그린 그림

1. 클라이언트는 등록할 Topic 혹은 받아올 Token을 FCM 서버에 요청한다. 
2. 요청 받은 FCM은 이에 해당하는 Topic을 FCM 서버에 등록하던가 아니면 FCM Token을 던져준다.
3. 2번까지의 시점에서 Token 방식을 채택하여 푸시 알림을 보낸다면 FCM Token을 BackEnd(나의 서버)에게 Token을 담아 DB에 담도록 요청해준다. 만약 Topic이라면 BackEnd에 Topic값을 담아 DB에 저장하도록 요청한다. 
4. 요청받은 데이터들이 성공적으로 되었는지 아니면 실패했는지에 대한 response를 해준다. (실패했으면 구독취소로직 혹은 토큰 재발급 로직 등등)

 

설명 보완 

3번을 다시보자. Topic을 DB에 저장하여 관리한다면 BackEnd로 요청해서 DB에 저장해도된다. 여러 블로그를 탐방한 결과 Token은 저장하지만 Topic을 저장하는 경우는 보질 못한거 같다. 느낌상으로 원하는 Topic 구독을 성공하면 FCM에서는 이를 인지하여 Topic 등록이 된다. 

Firebase console GUI나 Topic 리스트를 불러오는 함수에서 등록된 Topic들을 볼 수 있다. 

 

• 그리고 사실상 우리가 FCM을 찍먹한다. 즉, 맛보기만 한다면 3, 4번 과정까지는 필요없다. 1, 2번의 과정만 있으면 푸시 알림 기능을 사용할 수도 있다. 

 

요약정리

요약하자면 

1, 2번은 기본과정

Token 방법으로 푸시 알림을 보내겠다하면 Token을 DB에 저장

Topic 방법으로 푸시 알림을 보내겠다하면 DB까진 안가고 백엔드 로직에서 해당 토픽으로 FCM에게 메세지 데이터를 담아 요청하면 된다.

 

여러 방법이 존재하겠지만 나라면 이렇게 할 것 같다. (이 글을 보시고 좀 더 좋은 방안이 있다면 말씀부탁드리겠습니다!)

 

 

FCM에 메세지를 요청하는 흐름 

앱 서버를 하나 두어 FCM에 요청하게 해봤다.

1. 푸시 알림에 나타내줄 메시지 정보를 담아 앱 서버(BackEnd)에 API를 요청한다.
2. 앱 서버(BackEnd)에서는 우리가 구현한 로직에 따라 처리되면서 해당 정보를 담아 FCM BackEnd Server에 요청한다.
3. 클라이언트에서는 1, 2번 과정에 포함된 데이터가 푸시 알림으로 수신된다. 

 

설명 보완

1번에 앱 서버로 요청할때 Request Body에 메세지 정보를 담는다. (예를 들어 title, body라던가 data 메세지라던가) 

앱 서버 로직 (비즈니스 로직)에 의해 추가적인 데이터들이 삽입되면서 (예를 들어 정해진 Topic) 취합된 데이터가 FCM 서버에 보내진다. 

FCM은 해당 정보들이 성공적으로 검증되면 클라이언트에 응답하게 되면서 클라이언트에서는 메시지가 수신된다. 

 

빨간색 화살표 줄은 요청 후의 response이다. (성공 또는 실패, 이에 해당하는 핸들링은 여러분들이 알아서 처리하면 된다.)

 

요약 정리 

없다.

 

---

이제 흐름은 이정도로 가져가고 FCM을 구현하기 위해 스택을 정해야하는데 

클라이언트는 안드로이드, 백엔드는 Nestjs를 선택하겠다.

이유는 우리 회사에서 이 기술을 쓰기 때문이다. 

그리고 난 백엔드라 안드로이드를 잘 못만진다 ㅎㅎ

---

스택 

• 프론트 : 안드로이드 네이티브
• 백엔드 : Nestjs
• 서버 : Nestjs의 로컬 서버

작업 툴

• 프론트 : 안드로이드 스튜디오
• 백엔드 : VScode

OS

• 맥OS (M1)

FCM

• 자체 앱 서버
• Firebase Admin SDK
• Topic 주제 구독 방식
• 추후 토큰도..?