Web Push Notifications for a Simple Login System

Source

Evernote/Inbox/Web Push Notifications for a Simple Login System – Emir Bakhtarov – Medium.md

이 문서는 로그인 시스템에서 Web Push Notifications 와 Service Workers 를 활용하여 브라우저가 닫혀 있는 상태에서도 사용자에게 알림을 전달하는 방법을 다룹니다. 주요 내용은 다음과 같습니다:

브라우저 간 차이점: 2016 년 기준 Chrome 과 Firefox 의 Web Push 구현 방식이 다릅니다. Firefox 는 클라이언트 측에서 키를 생성하고 페이로드 (메시지 내용) 를 직접 포함할 수 있지만, Chrome 은 GCM 계정 기반 키 생성이 필요하며 페이로드를 직접 처리하지 못해 별도 요청이 필요합니다.
세션 문제 해결: 일반적인 로그인 세션 (Cookie/WebSocket) 은 브라우저가 닫히면 무효화되므로 푸시 알림용으로는 부적합합니다. 대신 Service Worker 가 백그라운드에서 실행되는 별도의 푸시 알림 세션이 필요합니다.
Client ID 관리: Service Worker 는 localStorage 에 접근할 수 없습니다. 이를 우회하기 위해 localForage 같은 라이브러리를 사용할 수 있지만, 이 문서는 subscription.endpoint 에서 추출한 고유 ID 를 Client ID 로 사용하는 더 간단한 방법을 제안합니다. 이 ID 는 서버 측 (예: Redis) 에 저장하여 사용자별 페이로드 매핑에 활용합니다.
Chrome 에서의 페이로드 로드: Chrome 에서 알림이 도착하면 Service Worker 내에서 비동기 HTTP 요청 (fetch) 을 통해 서버에 저장된 사용자별 페이로드를 가져와야 합니다. 이를 위해 서버는 알림 발송 시 페이로드를 캐싱해 두어야 합니다.

Web Push 는 브라우저가 닫혀 있어도 알림을 전달할 수 있어 로그인 시스템의 백그라운드 알림에 유용함
Firefox 는 푸시 메시지에 페이로드 포함 가능, Chrome 은 별도 HTTP 요청 필요
Service Worker 는 localStorage 접근 불가하므로, subscription.endpoint 에서 추출한 고유 ID 를 Client ID 로 사용
서버는 Client ID 와 User ID 를 매핑하여 사용자별 페이로드를 관리해야 함
Chrome 환경에서는 알림 수신 시 Service Worker 가 서버에서 페이로드를 fetch 해야 함