최근에 저는 Web API만 사용하여 처음부터 새로 구축된 새로운 webpush 패키지를 작업하고 있습니다. 이를 통해 (적어도 이론적으로는) 브라우저에서 직접 웹 푸시 메시지를 보낼 수 있습니다.

이 블로그 게시물은 웹 푸시 프로토콜이 무엇인지, 어떻게 작동하는지 설명하는 것을 목표로 합니다.
(RFC 8291) 및 내 라이브러리를 사용하여 웹 푸시 메시지를 보내는 방법

웹 푸시 프로토콜이란 무엇입니까?

웹 푸시 프로토콜은 애플리케이션이 사용자 에이전트(일반적으로 브라우저)에 메시지를 보낼 수 있도록 하는 중간 프로토콜입니다.

메시지가 사용자 에이전트에 푸시된다는 점에서 서버 전송 이벤트(SSE)와 유사하지만 다른 목적으로 사용됩니다. 웹 푸시 메시지에서는 웹사이트가 서비스 작업자로 열린 탭을 가질 필요가 없습니다.
푸시 메시지를 들을 수 있습니다. 백그라운드에서 작동합니다.

웹 푸시 프로토콜은 어떻게 작동하나요?

웹 푸시 프로토콜에는 세 가지 행위자가 포함됩니다.

• User-Agent: 일반적으로 웹사이트 방문자 브라우저
• 푸시 서비스: 브라우저에 따라 Google, Mozilla 또는 Apple이 유지 관리하고 소유하는 푸시 서버
• 응용 프로그램 서버: 귀하의 서버

다음은 이들 간의 상호작용에 대한 개요입니다.

     -------             --------------         ------------- 
    |  UA   |           | Push Service |       | Application |
     -------             --------------         ------------- 
        |                      |                      |
        |        Setup         |                      |
        ||                      |
        |           Provide Subscription              |
        |-------------------------------------------->|
        |                      |                      |
        :                      :                      :
        |                      |     Push Message     |
        |    Push Message      |



여러 가지 이유로 중간 푸시 서비스가 필요합니다.

첫째, 사용자 에이전트가 웹사이트당 하나가 아닌 모든 웹사이트에 대해 단일 연결만 유지하므로 대역폭과 배터리 사용량이 줄어듭니다.

또한 주요 브라우저의 푸시 서비스가 수백만 명의 사용자를 처리하도록 설계되어 확장성과 안정성이 향상됩니다. 사용자 에이전트가 오프라인인 경우 푸시 메시지를 보관해야 하기 때문에 푸시 서비스를 구축하려면 많은 엔지니어링, 탄력성 및 중복 인프라가 필요합니다

마지막으로 사용자 정의 푸시 서비스를 구축, 배포 및 유지 관리하는 것은 소규모 웹 회사에게는 너무 복잡하고 리소스 집약적인 경우가 많습니다. 이는 대기업이 자체 푸시 서비스를 개발하고 개선하는 데 필요한 리소스를 갖게 되므로 불공정한 경쟁 우위를 제공하게 됩니다.

나처럼 개인정보 보호에 관심이 있는 사용자라면 중개 서비스를 이용하세요.

모든 메시지를 받으면 위험 신호가 발생합니다. 이러한 문제를 해결하기 위해 웹 푸시

메시지는 HTTP 암호화 콘텐츠 인코딩을 통해 보호됩니다(내 
 참조).
http-ece 패키지), 

민감한 정보는 보호되며 제3자가 읽을 수 없습니다.

운송 중인 서비스.

  
  
  설정


위의 ASCII 그래프에서 설정 화살표가 다른 화살표와 다르다는 것을 눈치채셨을 것입니다. 이는 설정 단계가 구현에 따라 다르기 때문입니다. 모든 주요 브라우저는 자바스크립트
를 구현합니다.

에 API 푸시
다른 방법. 표준
을 반환하는 PushManager.subscribe() 메서드
PushSubscription이 노출되었습니다.

구독에는 항상 푸시 구독과 연결된 고유한 URL 엔드포인트와 메시지를 암호화하는 데 사용되는 공개 키가 포함됩니다.

구독을 생성할 때 메시지를 푸시하는 애플리케이션 서버를 식별하기 위해 선택적 applicationServerKey가 제공될 수 있습니다. VAPID(Voluntary Application Server Identification) 인증 방법입니다.

(RFC 8292). VAPID 키는 푸시 서비스에 대한 DDOS 공격을 완화하는 데 사용됩니다. 또한 애플리케이션 서버와 푸시 서비스 간의 인증을 추가하면 구독 엔드포인트 유출 위험이 줄어듭니다. 이러한 이유로 Firefox에서는 필수입니다.

  
  
  구독 제공


두 번째 단계는 메시지 전송을 시작할 수 있도록 애플리케이션 서버에 구독을 보내는 것입니다.

애플리케이션 서버는 일반적으로 나중에 재사용할 수 있도록 구독을 데이터베이스에 저장합니다.

  
  
  푸시 메시지


마지막으로, 메시지를 푸시하기 위해 애플리케이션 서버는 구독을 생성하기 위해 applicationServerKey가 제공된 경우 빈 인증 체계를 사용하여 암호화된 HTTP 요청을 보냅니다.

푸시 서비스로 메시지를 수신할 때 사용자 에이전트가 온라인 상태인 경우에는 

전달. 그렇지 않으면 사용자 에이전트가 온라인 상태가 되거나 메시지가 만료될 때까지 저장됩니다.

사용자 에이전트가 메시지를 받으면 알림을 표시하는 데 주로 사용되는 푸시 이벤트 핸들러를 실행합니다.

  
  
  webpush를 사용하여 애플리케이션 서버 설정


일부 브라우저에서는 VAPID 키를 필수로 지정하므로 먼저 VAPID 키를 생성해야 합니다.



$ deno run https://raw.githubusercontent.com/negrel/webpush/master/cmd/generate-vapid-keys.ts




출력을 복사하여 파일에 저장하면 VAPID 키를 다시 생성할 필요가 없습니다.

애플리케이션 서버 코드에서 다음과 같이 로드할 수 있습니다.



import * as webpush from "jsr:@negrel/webpush";

// Read generated VAPID file.
const vapidKeysJson = Deno.readTextFileSync("./path/to/vapid.json");

// Import VAPID keys.
webpush.importVapidKeys(JSON.parse(vapidKeysJson));




그런 다음 ApplicationServer 객체 인스턴스를 생성해야 합니다.



// adminEmail is used by Push services maintainer to contact you in case there
// is problem with your application server.
const adminEmail = "[email protected]";

// Create an application server object.
const appServer = await webpush.ApplicationServer.new({
  contactInformation: "mailto:"   adminEmail,
  vapidKeys,
});




그런 다음 푸시 메시지를 보내려면 PushSubscriber를 만들고 
를 호출하면 됩니다.
pushMessage()/pushTextMessage() 메소드는 다음과 같습니다:



const subsribers = [];

// HTTP handler for user agent sending their subscription.
function subscribeHandler(req) {
  // Extract subscription send by user agent.
  const subscription = await req.json();

  // Store subscription in db.
  // ...

  // Create a subscriber object.
  const sub = appServer.subscribe(subscription);

  // Store subscriber in memory.
  subscribers.push(sub);
}

// Helper method to send message to all subscribers.
function broadcastMessage(msg) {
  for (const sub of subscribes) {
    sub.pushTextMessage(msg, {});
  }
}




이제 구독자에게 푸시 메시지를 보내는 것입니다!

webpush 저장소에는 로컬에서 실행할 수 있는 유사한 코드가 포함된 대화형 예제가 포함되어 있습니다. 클라이언트 측 자바스크립트 코드도 포함되어 있으므로 꼭 확인해 보세요!