PushEvent

基线 2023

新可用

2023 年 3 月起,此功能在最新的设备和浏览器版本上均可使用。此功能可能在较旧的设备或浏览器上无法使用。

安全上下文: 此功能仅在 安全上下文(HTTPS)中可用,在一些或所有 支持的浏览器 中可用。

注意: 此功能仅在 服务工作者 中可用。

PushEvent 接口是 Push API 的一部分,表示已接收的推送消息。此事件被发送到 全局作用域ServiceWorker。它包含从应用程序服务器发送到 PushSubscription 的信息。

Event ExtendableEvent PushEvent

构造函数

PushEvent()

创建新的 PushEvent 对象。

实例属性

继承自其父级 ExtendableEvent 的属性。附加属性

PushEvent.data 只读

返回对 PushMessageData 对象的引用,该对象包含发送到 PushSubscription 的数据。

实例方法

继承自其父级 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",
    );
  });
});

规范

规范
Push API
# pushevent-interface

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅