Notification

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

注意:此功能在 Web Workers 中可用。

Notification 接口是 Notifications API 的一部分,用于配置和向用户显示桌面通知。

这些通知的外观和特定功能因平台而异,但它们通常提供一种异步向用户提供信息的方式。

EventTarget Notification

构造函数

Notification()

创建 Notification 对象的新实例。

静态属性

还继承了其父接口 EventTarget 的属性.

Notification.permission 只读

一个字符串,表示显示通知的当前权限。可能的值为:

  • denied — 用户拒绝显示通知。
  • granted — 用户同意显示通知。
  • default — 用户选择未知,因此浏览器将如同该值为 denied 一样处理。
Notification.maxActions 只读 实验性

设备和用户代理支持的最大操作数。

实例属性

还继承了其父接口 EventTarget 的属性.

Notification.actions 只读 实验性

在构造函数的 options 参数中指定的通知的操作数组。

Notification.badge 只读

一个字符串,包含当没有足够空间显示通知本身时(例如,Android 通知栏)用于表示通知的图像的 URL。在 Android 设备上,徽章应兼容高达 4x 分辨率的设备,大约 96 x 96 像素,并且图像会自动被遮罩。

Notification.body 只读

在构造函数的 options 参数中指定的通知的主体字符串。

Notification.data 只读

返回通知数据的结构化克隆。

Notification.dir 只读

在构造函数的 options 参数中指定的通知的文本方向。

Notification.icon 只读

在构造函数的 options 参数中指定的用作通知图标的图像的 URL。

Notification.image 只读 实验性

在构造函数的 options 参数中指定的将作为通知一部分显示的图像的 URL。

Notification.lang 只读

在构造函数的 options 参数中指定的通知的语言代码。

Notification.renotify 只读 实验性

指定用户在新通知替换旧通知后是否应收到通知。

Notification.requireInteraction 只读

一个布尔值,指示通知应保持活动状态,直到用户单击或关闭它,而不是自动关闭。

Notification.silent 只读

指定通知是否应静音 - 即,无论设备设置如何,都不应发出声音或振动。

Notification.tag 只读

在构造函数的 options 参数中指定的通知的 ID(如果有)。

Notification.timestamp 只读 实验性

指定创建通知或适用通知的时间(过去、现在或将来)。

Notification.title 只读

在构造函数的第一个参数中指定的通知的标题。

Notification.vibrate 只读 实验性

指定具有振动硬件的设备的振动模式。

静态方法

还继承了其父接口 EventTarget 的方法.

Notification.requestPermission()

请求用户显示通知的权限。

实例方法

还继承了其父接口 EventTarget 的方法.

Notification.close()

以编程方式关闭通知实例。

事件

还继承了其父接口 EventTarget 的事件.

click

当用户单击通知时触发。

close

当用户关闭通知时触发。

error

当通知遇到错误时触发。

show

当通知显示时触发。

示例

假设此基本 HTML

html
<button>Notify me!</button>

可以通过以下方式发送通知 - 这里我们提供了一套相当冗长且完整的代码,如果您想先检查是否支持通知,然后检查当前源是否已被授予发送通知的权限,如果需要则请求权限,然后再发送通知,就可以使用这些代码。

js
document.querySelector("button").addEventListener("click", notifyMe);

function notifyMe() {
  if (!("Notification" in window)) {
    // Check if the browser supports notifications
    alert("This browser does not support desktop notification");
  } else if (Notification.permission === "granted") {
    // Check whether notification permissions have already been granted;
    // if so, create a notification
    const notification = new Notification("Hi there!");
    // …
  } else if (Notification.permission !== "denied") {
    // We need to ask the user for permission
    Notification.requestPermission().then((permission) => {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        const notification = new Notification("Hi there!");
        // …
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them anymore.
}

我们不再在此页面上显示实时示例,因为 Chrome 和 Firefox 不再允许从跨域 <iframe> 请求通知权限,其他浏览器也将效仿。要查看示例的实际效果,请查看我们的 待办事项列表示例(也请参阅 应用实时运行)。

注意: 在上面的示例中,我们在用户手势(单击按钮)的响应中生成通知。这不仅是最佳实践 - 您不应该向用户发送他们未同意的通知 - 而且将来浏览器将明确禁止未响应用户手势触发的通知。例如,Firefox 从 72 版本开始就已经这样做了。

规范

规范
Notifications API
# api

浏览器兼容性

另见