[기능] 웹 푸시 알림(Web Push Notification)

[NarciSource]

📌 필요한 작업

브라우저가 푸시 서버로부터 알림을 수신하고 사용자에게 표시

📝 작업할 항목

Push API 워크플로우

1. 권한 요청: 사용자가 알림 권한을 승인.
2. 구독 생성: 브라우저가 서버에 구독 정보를 제공.
3. 서버 메시지 전송: 서버가 푸시 메시지를 생성하고 브라우저로 전송.
4. 알림 표시: 브라우저가 메시지를 받고 알림을 표시.

참여자

1. 웹 애플리케이션
   • 사용자로부터 알림 권한을 요청.
   • Service Worker를 등록하고 Push Subscription을 생성.
   • 구독 정보를 애플리케이션 서버로 전송.
2. 서비스 워커
   • Push API와 상호작용하여 푸시 메시지를 수신.
   • 받은 메시지를 기반으로 알림을 표시.
3. 백엔드 서버
   • 브라우저에서 받은 구독 정보를 저장.
   • 푸시 메시지를 생성.
   • 브라우저의 푸시 서버로 메시지를 전송.
   • VAPID 키를 통해 브라우저 푸시 서버와 인증.
4. 푸시 서버 (Google Cloud Messaging, Mozilla Autopush)
   • 애플리케이션 서버로부터 메시지를 수신.
   • 브라우저와 연결된 푸시 엔드포인트로 메시지를 전달.
   • 브라우저와 클라이언트 간의 연결을 관리.

동작

• 웹앱에서 브라우저로 알림 권한 요청
• 서비스 워커를 사용하여 푸시 구독 생성
• 백엔드 서버로 구독 정보 전송
• 백엔드 서버에서 푸시 서버로 메시지 전송 → Web Push Protocol
• 서비스 워커에서 알림 처리

sequenceDiagram
	participant TP as Web Application JS
	participant F as Firefox
	participant A as Autopush
	participant TPS as Third party Server
		TP->>F: subscribe(scope)
		activate TP
		activate F
		F->>A: subscribe(scope) using web socket
		activate A
		A->>F: URL
		deactivate A
		F->>F: Create pub/privKey Encryption pair
		F->>F: Persist URL, pubKey, privKey indexed using an id derived from scope
		F->>TP: URL + pubKey
		deactivate F
		TP-->>TPS: URL + pubKey
		deactivate TP
		TPS-->>TPS: Encrypt payload using pubKey
		TPS-->>A: Send encrypted payload using URL
		activate A
		A->>F: Send encrypted payload using web socket
		deactivate A
		activate F
		F->>F: Decrypt payload using privKey
		F->>F: Display Notification
		deactivate F

Loading

📚 추가 정보

https://firefox-source-docs.mozilla.org/dom/push/index.html