@마크다운
[FCM](https://firebase.google.com/docs/cloud-messaging/)
FCM은 메시지를 전송할 수 있는 플랫폼이다.
여기서 말하는 메시지는 메일,SMS등이 아닌 푸시 메시지를 말한다.
ex) 앱에서의 카카오톡 메시지 알림이나 slack등의 메시지 알림등
특히 페이스북이나 슬랙등을 사용하다보면 해당 웹페이지를 보고 있지 않은데 모니터 우측하단에 알림이 뜨는경우가 있다.
이런경우는 브라우저의 백그라운드 에서 서비스워커가 동작하고 있어서 메시지를 받을 수 있다.
[서비스워커](https://developers.google.com/web/fundamentals/primers/service-workers/#you_need_https)
# 웹푸시 FCM을 사용하기 전에
FCM은 기본적으로 https가 필요하다.
다시말하면 https가 아니면 메시지를 받을 수 없다.
그 이유는 서비스워커의 네트워크 보안적 이슈가 있어서 그렇다고 한다.
http라면 중간자 공격을 통해 메시지를 탈취할 수 있기 때문.
[중간자 공격](https://ko.wikipedia.org/wiki/%EC%A4%91%EA%B0%84%EC%9E%90_%EA%B3%B5%EA%B2%A9)
때문에 FCM은 https 환경에서만 동작하는 서비스워커를 사용하고 있으며 https환경에서 테스트를 거쳐야 한다.
ssl 인증서가 달려있는 서버에서 사용해야 하며 없는 경우 [github pages](https://pages.github.com/)를 이용하여 테스트환경을 만들 수 있다.
# FCM
FCM 공식문서가 상당히 잘 작성되어 있어(한글화도 잘되어있음) 보고 따라하기만 해도 금방 해낼 수 있다.
잘 모르겠다면 공식문서에 있는 파이어캐스트 동영상을 아주아주 강력하게 추천한다.
[링크]()
FCM의 동작방식은 다음과 같다.
```
유저가 웹페이지를 접속 → URL 좌측에 알림 허용여부를 알리는 modal이 뜸 → 허용 or 차단(차단하면 FCM 못받음)
→ 허용을 하게 되면 해당 브라우저를 사용하고 있는 유저에게 token이 발행됨
→ 서버는 token값을 가지고 있다가 원하는 타이밍에 FCM 서버에 request를 보냄 (메시지 내용포함)
→ FCM서버는 자체적인 인증을 거친 후 이상이 없다면 메시지를 리턴
→ 해당 페이지에서 유저가 보고 있는 페이지가 포그라운드 인지 백그라운드인지를 판단하여 동작을 처리함
```
# 주의
FCM 문서에도 나오는 내용지만 다시 적어본다.
서비스워커는 등록한 시점(서비스 워커를 호출하는 시점)이후에 동작한다.
예를들어 설명하자면 https://hong3is.me/sw.js는 유저가 hong3is.me에 들어온 시점에 서비스워커가 동작하며 백그라운드로 동작하게된다.
만약 서비스워커를 https://hong3is.me/sub/domain/sw.js 이렇게 등록이 되었다면 https://hong3is.me/sub/domain/ 에 들어온 시점부터 동작하게 되며
상위 도메인에서는 동작하지 않는다.
즉, 서브도메인별 다른 서비스워커를 동작시킬 수 있다는 것이다.
그렇기 때문에 FCM사용을 고려를 하고 있다면 서브도메인 설계를 어떻게 해야할지 고민을 해야한다.
FCM은 주로 알림메시지로 사용하기 때문에 루트도메인에 들어오면 바로 서비스워커가 동작하도록 해버리는것도 좋은 방법이다.
**개발자 도구 → Application → service workers에 들어가면 동작하고 있는 서비스워커들을 볼 수 있음!**
FCM에 대한 코드를 따로 가지고 있지않아 코드로 설명을 드릴수 없는점이 약간 안타깝지만, 문서가 진짜 진짜 설명이 잘 되어있다.
요약하자면 다음과 같이 요악 할 수있겠다.
1. 앱이랑 보내는방법은 똑같음
2. 브라우저에 접근했을때 token을 발행받음.
3. 웹에서는 포그라운드일때 수신, 백그라운드(서비스워커)일때 수신 두가지를 세팅해줘야함
4. 서버가 해당 브라우저로 메시지를 보내는 방식이 아닌 서버 -> FCM -> 브라우저임
5. https환경에서만 됨.
6. IE에서 안될수도 있음.
7. 서비스워커 등록시점을 루트도메인으로 해라(정신건강을 위해서라면)