웹 푸시 알림 기능 추가 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 웹 애플리케이션 개발자

- 실시간 알림 기능 구현을 고려하는 프론트엔드/백엔드 엔지니어

- JavaScript 및 Service Worker 기술을 사용하는 개발자

핵심 요약

• Service Worker를 통해 백그라운드에서 알림 처리 가능
• PushManager를 통해 사용자 허가 후 VAPID 키 기반 구독 생성
• web-push 라이브러리를 사용해 Web Push Protocol 기반 알림 전송

섹션별 세부 요약

1. Service Worker 등록

• Service Worker는 브라우저 백그라운드에서 작동하는 JavaScript 파일
• navigator.serviceWorker.ready를 통해 등록, 푸시 이벤트 리스닝
• self.addEventListener('push', ...)로 알림 표시 로직 구현
• notificationclick 이벤트 핸들러로 알림 클릭 시 창 열기

2. 사용자 구독 처리

• PushManager.subscribe()를 통해 사용자 허가 받음
• 반환된 subscription 객체에 포함된 endpoint URL 및 암호화 키를 백엔드에 저장
• fetch('/api/save-subscription', ...)로 백엔드에 구독 정보 전송
• userVisibleOnly: true 옵션으로 사용자에게만 보이는 알림 강제

3. 서버에서 알림 전송

• web-push 라이브러리 사용, VAPID 키 설정 필수
• webpush.setVapidDetails(...)로 서버 키 정보 설정
• webpush.sendNotification(subscription, payload)로 알림 전송
• payload에 title, body, icon, url 데이터 포함

결론

• VAPID 키와 web-push 라이브러리를 활용해 Firebase FCM 없이도 안정적인 웹 푸시 알림 구현 가능
• 사용자 허가 단계에서 applicationServerKey 설정 필수
• 알림 클릭 시 clients.openWindow()를 통해 해당 URL 열기
• 다음 단계: WebRTC 기반 영상 통화 기능 및 그룹 관리 기능 추가 예정