Webpush는
브라우저에 푸시 메세지를 보내는 것을 말합니다.
푸시 메세지는 무엇일까요?
앱또는 브라우저와 연결,구독되어진 사용자에게 서비스와 관련된 정보를 전달해주는 것입니다.
앱과 같은 경우는 아래와 같은 형식으로 사용자들에게 보여집니다.
브라우저와 같은 경우는 이런 식으로 사용자들에게 전달 되어집니다.
Webpush는 해당 서비스의 브라우저가 꺼져있어도 서비스 워커라는 자바스크립트 파일에 의해 푸시메세지를 보낼 수 있습니다. (단, 제가 FCM을 사용해본결과 브라우저가 꺼져있었다면, 메세지가 없다가 브라우저가 켜짐과 얼마지나지 않아 메세지가 전달되어집니다.)
장점은 LMS(문자)와 같은 기능을 할 뿐더러 가격적으로도 값싸다는 것(메세지 보내는 기능은 무료입니다.) 다른 채널과 이하수준의 기능을 하지 않는다는 점 여러 장점들이 많습니다.
구조와 작동순서는 어떻게 될까요?
큰 구조로 본다면, 브라우저(클라이언트), 서비스 워커, 웹 서버 이렇게 3가지로 구성되어 있습니다.
- 브라우저는 웹푸시 알림을 구독하거나 취소하거나, 구독을 하게되면 웹푸시 메세지를 표시하고 클릭이벤트를 처리합니다.
- 서비스 워커는 서버와 브라우저(사용자) 사이에서 푸시메세지를 교환 처리하고 푸시메세지를 받았을 때 알림을 생성합니다 또한,
웹브라우저의 백그라운드에서 실행되기 때문에 브라우저의 쓰레드와 별도로 실행되어
브라우저가 꺼져있어도 웹푸시 알림을 보낼 수 있게해줍니다.- 웹 서버는 사용자의 구독정보와 푸시메세지를 처리하고 브라우저로 보낼 메세지를 생성하고 암호화를 통해 서비스 워커에 보내게 됩니다.
작동 순서는 다음과 같습니다.
브라우저에서 웹푸시 알림 허용
=> 서비스 워커에서 해당 유저의 구독정보 전달
=> 브라우저에서 웹서버로 자신의 구독정보 전달웹서버에서 푸시메세지를 생성하여 구독정보와 비공개키를 서비스워커에 전달
서비스워커에서 먼저 공개키로 유효성 검증과 검증된 경우 구독정보에 해당하는 브라우저로 푸시메세지를 전송하게 됩니다.
작동 순서에서 나오는 공개키와 비공개키는 VAPID (Voluntary Application Server Identification)인 인증 프로토콜입니다. 이를 통해서 브라우저와 서버간 오고가는 푸시메시지 교환 과정에서 보안성을 더욱 강화할 수 있습니다.
VAPID는 공개키와 비공개키 한쌍을 사용하여 생성 됩니다.
그리고 위 작동 순서에 3번에서 볼 수 있듯이 서버에서 비공개키를 보내면 서비스워커에서 확인할수 있게됩니다.
웹 푸시는 이러한 구조를 통해 사용자가 구독한 정보와 푸시 메시지를 안전하고 빠르게 전달할 수 있습니다. 사용자가 구독한 정보는 브라우저에서 관리되며, 푸시 메시지는 서비스 워커를 통해 백그라운드에서 처리됩니다. 이를 통해 사용자는 브라우저를 실행하지 않아도 알림(Notification)을 받을 수 있으며, 서버에서 전송한 푸시 메시지는 브라우저가 종료되어도 표시됩니다
다음 글로는 Vue.js로 FCM과 연동하여 진행한 토이프로젝트와 관련된 글을 작성하도록 하겠습니다.
참조 블로그
https://uracle.blog/2021/09/24/webpush-2/
https://web.dev/push-notifications-web-push-protocol/
https://geundung.dev/114
