PushEvent

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

보안 컨텍스트: 이 기능은 일부 또는 모든 지원 브라우저의 보안 컨텍스트 (HTTPS)에서만 사용할 수 있습니다.

참고 : This feature is only available in Service Workers.

Push API의 PushEvent 인터페이스는 수신된 푸시 메시지를 나타냅니다. 이 이벤트는 ServiceWorker의 전역 범위로 전송됩니다. 애플리케이션 서버에서 PushSubscription로 전송된 정보를 포함합니다.

Event ExtendableEvent PushEvent

생성자

PushEvent()

새로운 PushEvent 객체를 생성합니다.

인스턴스 속성

부모인 ExtendableEvent에서 속성을 상속받습니다. 다음은 추가 속성입니다.

PushEvent.data 읽기 전용

PushSubscription으로 전송된 데이터를 포함하는 PushMessageData 객체에 대한 참조를 반환합니다.

인스턴스 메서드

부모인 ExtendableEvent에서 메서드를 상속받습니다.

예제

다음 예제는 PushEvent에서 데이터를 가져와 서비스 워커의 모든 클라이언트에 표시합니다.

js
self.addEventListener("push", (event) => {
  if (!(self.Notification && self.Notification.permission === "granted")) {
    return;
  }

  const data = event.data?.json() ?? {};
  const title = data.title || "Something Has Happened";
  const message =
    data.message || "Here's something you might want to check out.";
  const icon = "images/new-notification.png";

  const notification = new self.Notification(title, {
    body: message,
    tag: "simple-push-demo-notification",
    icon,
  });

  notification.addEventListener("click", () => {
    clients.openWindow(
      "https://example.blog.com/2015/03/04/something-new.html",
    );
  });
});

명세서

Specification
Push API
# pushevent-interface

브라우저 호환성

BCD tables only load in the browser

같이 보기