PWA(Progressive Web App)

PWA는 웹에서 네이티브 앱과 같은 동작을 가능하게 하도록 특정 기술과 표준 패턴을 사용해 개발된 web app을 의미합니다. 홈 화면에 추가, 푸시 알림, 캐싱으로 로딩시간 단축 및 성능 향상 가능하며, PWA의 Push Notification 기능을 사용하기 위해서는 Service Worker API가 등록되어 있어야 합니다.

FCM(Firebase Cloud Messaging)

FCM은 Google에서 제공하는 Server와 Client App 간에 push message를 보낼 수 있는 서비스를 말합니다. 무료로 Message를 안정적으로 전송할 수 있는 교차 플랫폼 메시징 솔루션입니다. FCM을 통해 모든 사용자에게 알림 메시지를 전송할 수도 있고, 그룹을 지어 메시지를 전송할 수도 있습니다. Firebase의 서비스는 요금 정책에 따라, 이용할 수 있는 범위가 다르지만 FCM은 요금 정책에 구분 없이 무료로 사용하는 것이 가능합니다.

FCM를 도입하기 전?

FCM을 도입하기 위해서는 Service Worker가 필수 조건입니다.

Service Worker란?
브라우저가 백그라운드에서 실행하는 스크립트이며, 웹페이지와는 다른 라이프 사이클을 가지고 있습니다. 오프라인일 경우에도 웹 어플리케이션을 기동할 수 있도록 합니다.(오프라인 캐시) 간단히 말해, 사용자의 fetch 요청을 가로채, 대신 응답해 줄 수 있습니다. 보안을 위해 https와 localhost에서만 동작하는 특징이 있습니다.

Service Worker가 필요한 이유?

Service Worker의 네트워크 보안적 이슈 때문입니다.
중간자 공격을 통해 message를 탈취할 수 있는 네트워크 보안적 이슈가 있습니다.

중간자 공격 [ MITM(man in the middle attack) ]
네트워크 통신을 조작해 통신 내용을 도청, 조작하는 공격 기법입니다. 이러한 중간자 공격을 막기 위해 암호 프로토콜은 인증을 사용합니다. TLS/SSL 프로토콜은 공개 키를 기반으로 한 인증 사용

FCM 이용해 Push 메시지 보내는 이유?

기존에는 IOS, Android, Web 등 플랫폼에서 Push 메시지를 보내기 위해서 각 플랫폼 환경(APNS, GCM)별로 개발해야 하는 불편함이 존재합니다. 하지만 FCM은 교차 플랫폼 메시지 솔루션이므로 FCM을 이용해 개발할 경우, 플랫폼에 종속되지 않고 Push 메시지 전송 가능하다는 장점이 있습니다. 또한 사용자는 낮은 배터리와 네트워크 사용만으로 메시지 송수신이 가능하다는 장점도 있습니다.

FCM 동작방식

1. User가 웹 페이지에 접속합니다.

2. URL 좌측에 알림 허용 여부를 알리는 modal이 뜹니다.

3. User가 허용 또는 차단 버튼을 누릅니다.

만약 User가 차단을 눌렀을 경우 FCM을 받을 수 없습니다.

4. 허용하면 해당 브라우저를 사용하고 있는 User에게 token을 생성해줍니다.

5. 서버는 token을 가지고 있다가 원하는 타이밍에 FCM 서버에 request 보냅니다.

request에 message contents 포함합니다.

6. FCM 서버는 자체적인 인증을 거친 후 message를 반환합니다.

해당 페이지에서 User가 보고 있는 페이지가 foreground인지 background인지 판단 후 동작을 처리합니다.

FCM은 상위 도메인에서 동작하지 않습니다.

만약 Service Worker를 [https://www.example.co.kr/sub/domain/sw.js] 에 등록 했다면 [https://www.example.co.kr/sub/domain/] 에 들어온 시점부터 Service Worker가 동작하며 [http://www.example.co.kr/]에서는 동작하지 않습니다.

FCM이 상위 도메인에서 동작하지 않는다는 점 때문에 서브 도메인별 다른 Service Worker를 동작시킬 수 있습니다.

동작 중인 Service Worker 확인 방법
개발자 도구 → Application → Service Workers에서 확인 할 수 있습니다.

Web Push(메세지 수신)

FCM의 동작 과정 중 message를 반환하는 Web Push에 대해 자세히 살펴보겠습니다.

Foreground

Foreground 상태란 웹 사이트가 열려 있고, 탭이 활성화된 상태를 말합니다. Badge나 toast 형태로 Push 알림이 뜹니다.

Background(Service Worker)

Background 상태란 웹 사이트가 닫혀 있거나 열려 있지만 다른 탭을 보고 있을 때를 말합니다. 즉 웹에 접속하지 않을 때를 의미합니다.

앱 상태	알림	데이터	모두
Foreground	onMessage	onMessage	onMessage
Background(Service Worker)	onBackgroundMessage(화면 알림이 자동으로 표시)	onBackgroundMessage	onBackgroundMessage(화면 알림이 자동으로 표시됨)

💡TL;DR - FCM

앱과 보내는 방식 동일
브라우저에 접근했을 때 token 발행받음
웹에서는 foreground, background(Service Worker)일 때 수신 두 가지 setting 해야 함
message를 보내는 방식
- 서버 → FCM → 브라우저
https 환경에서만 가능
Service Worker 등록시점은 Root domain으로 권장