[FCM] FCM 개발기 - 삽질기

FCM 개발기 - 삽질기

 

회사에 웹 푸시 알림을 붙이기 위해 여러모로 찾아보던 중 

팀장님이 GCM을 추천해주셔서 찾아보았으나...

GCM은 서비스가 종료되어 버림..

GCM이 서비스 종료 후 FCM (Firebase Cloud Messaging) 로 대체 되었는데 소스도 더 쉽고 간편하다나..

(GCM 안써봐서 모름)

유감스럽게도 FCM에 대해서는 안드로이드나 IOS 오픈소스가 많지만 웹에 대해서는 엄청 적은편입니다.

그나마 스택오버플로우에는 꽤 있는 편입니다.

 

FCM 에 대한 가이드 문서는 아래 참고 해주세여

http://firebase.google.com/docs/cloud-messaging?hl=ko

Firebase 클라우드 메시징

 

원래는 개발서버에서 테스트를 해야하지만, ssl 인증서가 설치되지 않은 관계로..

실서버에서 직접 테스트 진행하여 문법에러나 혹시라도 나때메 뭐 안될까봐 엄청 불안에 떨면서 개발했던...

 

FCM 가이드를 보면 왠만한 것들은 누구나 따라 할 수 있으나 

저는 난독증과... 급한 성격으로 인해 2주동안 삽질과 구글링을 밥 먹듯이 했습니다.

 

간단한 프로세스로는

1. 로그인 시 token을 발급 - 자바스크립트

2. 푸시 메세지 전달 - PHP (cURL)

cURL 예제

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt ($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_HTTPHEADER, $header); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); 
$res = curl_exec ($ch);

 

3. 메세지 수신 시 포그라운드/백그라운드에 대한 로직처리 - 자바스크립트

 

 

FCM에서는 포그라운드/백그라운드 2가지 경우에 따라 API이나 JS 처리를 달리해줘야 합니다.

1. 포그라운드

- 메세지를 받는 대상(Sender) 이 포커싱하고 있는 웹 페이지와 서버가 같은 경우

- index.html 에 구현되어 있는 onMessage() 메소드에 의해 처리가 됩니다.

- onMessage() 메소드의 payload 의 값은 데이터의 정보를 가지고 있습니다.

- 백그라운드인 경우 오른쪽 하단에 chrome 전용 push 창이 자동으로 뜨지만 포그라운드 경우는 절대 안뜸

- payload 값을 가지고 직접 HTML을 구현해줘야합니다. (iframe 으로 처리 및 특정 태크 show/hide 처리하여 보여주든)

 

2. 백그라운드

- Sender 가 서버 도메인 외의 다른 페이지를 포커싱 하고 있을 경우

- firebase-messaging-sw.js 파일의 setBackgroundMessageHandler() 메소드에 의해 처리됩니다.

 

이상, 2주간 삽질하고 크롤링하면서 왜 FCM - WEB에 레퍼런스도 없고

혹시 나도 시간지나면 까먹을까봐 만들어본 [FCM 삽질기] 였습니다.

 

sample 소스는 아래의 github를 참고하시면 도움많이 될꺼예요

http://github.com/firebase/quickstart-js/tree/master/messaging

firebase/quickstart-js