通知

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

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

通知 APINotification接口用于配置和显示桌面通知给用户。

这些通知的外观和具体功能在不同平台上有所不同,但通常它们提供了一种异步向用户提供信息的方式。

EventTarget Notification

构造函数

Notification()

创建一个新的Notification对象实例。

静态属性

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

Notification.permission 只读

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

  • denied - 用户拒绝显示通知。
  • granted - 用户同意显示通知。
  • default - 用户选择未知,因此浏览器将像值被拒绝一样行事。
Notification.maxActions 只读 实验性

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

实例属性

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

Notification.actions 只读 实验性

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

Notification.badge 只读

包含图像 URL 的字符串,用于在没有足够空间显示通知本身时表示通知,例如 Android 通知栏。在 Android 设备上,徽章应适应高达 4 倍分辨率的设备,大约 96 x 96 像素,图像将自动蒙版。

Notification.body 只读

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

Notification.data 只读

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

Notification.dir 只读

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

Notification.icon 只读

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

Notification.image 只读 实验性

要显示为通知一部分的图像的 URL,如构造函数的options参数中指定。

Notification.lang 只读

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

Notification.renotify 只读 实验性

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

Notification.requireInteraction 只读

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

Notification.silent 只读

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

Notification.tag 只读

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

Notification.timestamp 只读 实验性

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

Notification.title 只读

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

Notification.vibrate 只读 实验性

为具有振动硬件的设备指定振动模式以发出。

静态方法

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

Notification.requestPermission()

请求用户允许显示通知。

实例方法

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

Notification.close()

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

事件

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

点击

当用户点击通知时触发。

关闭

当用户关闭通知时触发。

错误

当通知遇到错误时触发。

显示

当通知显示时触发。

示例

假设这个基本的 HTML

html
<button onclick="notifyMe()">Notify me!</button>

可以按如下方式发送通知 - 在这里,我们提供了一套相当详细且完整的代码,如果您希望首先检查是否支持通知,然后检查当前来源是否已获得发送通知的权限,然后在发送通知之前根据需要请求权限,则可以使用这些代码。

js
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 版开始已经这样做了。

规范

规范
通知 API 标准
# api

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅