ServiceWorkerRegistration：showNotification() 方法

语法

showNotification(title)
showNotification(title, options)

参数

title

为通知定义一个标题，该标题会显示在通知窗口的顶部。

options 可选

一个选项对象，其中包含您想要应用于通知的任何自定义设置。可能的选项包括：

actions 可选 实验性

一个操作数组，将显示在通知中，默认是一个空数组。数组中的每个元素都可以是一个具有以下成员的对象：

action

一个标识要在通知上显示的用户操作的字符串。

title

一个包含要显示给用户的操作文本的字符串。

icon 可选

一个包含要与操作一起显示的图标的 URL 的字符串。

在 notificationclick 事件中，使用 event.action 构建适当的响应。

badge 可选 实验性

一个字符串，包含当没有足够空间显示通知本身时用于表示通知的图像的 URL；例如，Android 通知栏。在 Android 设备上，徽章应兼容高达 4 倍分辨率的设备，约 96x96px，图像将被自动屏蔽。

body 可选

一个字符串，表示通知的正文文本，显示在标题下方。默认值是空字符串。

data 可选 实验性

您希望与通知关联的任意数据。它可以是任何 结构化克隆算法支持的数据类型。默认值是 null。

dir 可选

显示通知的方向。默认值为 auto，它会根据浏览器的语言设置进行调整，但您可以通过设置 ltr 和 rtl 的值来覆盖此行为（尽管大多数浏览器似乎会忽略这些设置）。

icon 可选

一个包含要在通知中显示的图标的 URL 的字符串。

image 可选 实验性

一个包含要在通知中显示的图像的 URL 的字符串。

lang 可选

通知的语言，使用表示 BCP 47 语言标签 的字符串指定。默认值是空字符串。

renotify 可选 实验性

一个布尔值，指定用户在新的通知替换旧通知后是否应该收到通知。默认值为 false，表示用户不会收到通知。如果设置为 true，则 tag 也必须设置。

requireInteraction 可选 实验性

指示通知应保持活动状态，直到用户点击或关闭它，而不是自动关闭。默认值为 false。

silent 可选

一个布尔值，指定通知是否静音（不发出声音或振动），无论设备设置如何。默认值 null 表示遵循设备默认设置。如果设置为 true，则 vibrate 不能存在。

tag 可选

一个字符串，表示通知的标识标签。默认值是空字符串。

timestamp 可选

一个时间戳，以毫秒为单位的 Unix 时间 表示，代表与通知相关的时间。当通知用于无法立即传递的消息（因为设备离线）时，这可能是在过去的时间，或者对于即将开始的会议，这可能是在未来。

vibrate 可选 实验性

一个 振动模式，供设备的振动硬件在发出通知时使用。如果指定，则 silent 必须不是 true。

返回值

一个 Promise，解析为 undefined。

异常

TypeError

在以下情况下抛出

• 当前 Service Worker 的状态不是 activating 或 activated。
• 用户已明确拒绝浏览器使用该 API 的权限请求。
• silent 选项为 true，并且指定了 vibrate 选项。
• renotify 选项为 true，但 tag 选项为空。

DataCloneError DOMException

如果 data 选项的序列化因某种原因失败，则抛出此异常。

示例

navigator.serviceWorker.register("sw.js");

function showNotification() {
  Notification.requestPermission().then((result) => {
    if (result === "granted") {
      navigator.serviceWorker.ready.then((registration) => {
        registration.showNotification("Vibration Sample", {
          body: "Buzz! Buzz!",
          icon: "../images/touch/chrome-touch-icon-192x192.png",
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: "vibration-sample",
        });
      });
    }
  });
}

要在合适的时间调用上述函数，您可以监听 notificationclick 事件。

您还可以使用 ServiceWorkerRegistration.getNotifications() 来检索从当前 Service Worker 发出的 Notification 的详细信息。

规范

浏览器兼容性