Notification - 用于配置和向用户显示桌面通知

Notification 是 Notifications API 的接口，用于配置和向用户显示桌面通知。这些通知的外观和特定功能因平台而异，但通常它们提供了一种向用户异步提供信息的方式。

构造函数

Notification()

创建 Notification 对象的新实例。

属性

静态属性

这些属性仅在 Notification 对象本身上可用。

Notification.permission 只读

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

• denied — 用户拒绝显示通知。
• granted — 用户接受显示通知。
• default — 用户选择是未知的，因此浏览器将像 denied 一样操作。

Notification.maxActions 只读

实例属性

这些属性仅在 Notification 对象的实例上可用。

Notification.actions 只读

通知的 actions 数组，在构造函数的 options 参数中指定。

Notification.badge 只读

没有足够的空间显示通知本身时，用于表示通知的图像的 URL。

Notification.body 只读

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

Notification.data 只读

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

Notification.dir 只读

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

Notification.lang 只读

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

Notification.tag 只读

通知的 ID（如果有），在构造函数的 options 参数中指定。

Notification.icon 只读

图片的网址，用作通知的图标，在构造函数的 options 参数中指定。

Notification.image 只读

要在通知中显示的图像的 URL，在构造函数的 options 参数中所指定。

Notification.renotify 只读

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

Notification.requireInteraction 只读

一个 Boolean，指示通知应保持活动状态，直到用户单击或取消通知为止，而不是自动关闭。

Notification.silent 只读

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

Notification.timestamp 只读

指定创建或适用通知的时间（可以是过去，现在或将来）。

Notification.title 只读

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

Notification.vibrate 只读

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

事件处理程序

Notification.onclick

click 事件的处理程序。每次用户单击通知时都会触发该事件。

Notification.onclose

close 事件的处理程序。当用户关闭通知时触发。

Notification.onerror

error 事件的处理程序。每次通知遇到错误时都会触发该事件。

Notification.onshow

show 事件的处理程序。显示通知时触发。

方法

静态方法

这些方法仅在 Notification 对象本身上可用。

Notification.requestPermission()

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

实例方法

这些属性仅在 Notification 对象的实例上或通过其 prototype 可用。Notification 对象还继承了 EventTarget 接口。

Notification.close()

以编程方式关闭通知。

实例

可以按以下方式发送通知 - 首先检查通知是否受支持，然后检查是否已授予当前来源的发送通知的权限，然后如果需要请求权限，发送一个通知。

<button onclick="notifyMe()">提醒我！</button>

<script>
function notifyMe() {
  // 让我们检查浏览器是否支持通知
  if (!("Notification" in window)) {
    alert("该浏览器不支持桌面通知");
  }

  // 让我们检查通知权限是否已被授予
  else if (Notification.permission === "granted") {
    // 如果可以的话，我们来创建一个通知
    var notification = new Notification("Hi there!");
  }

  // 否则，我们需要征求用户的许可
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // 如果用户接受，我们创建一个通知
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // 最后，如果用户拒绝了通知，并且您希望得到尊重，则无需再理会它们。
}
</script>

尝试一下 »

替代示例：在页面加载时运行

在许多情况下，您不需要这么冗长。例如，在 Emogotchi 演示（查看源代码）中，我们只需运行 Notification.requestPermission 的所有内容，以确保我们可以获取发送通知的权限（这使用了较新的基于 Promise 的方法语法）：

Notification.requestPermission().then(function(result) {
  console.log(result);
});

然后，当我们要触发通知时，我们运行一个简单的 spawnNotification() 函数 - 传递参数以指定所需的正文，图标和标题。然后，它创建必要的 options 对象，并使用 Notification() 构造函数触发通知。

function spawnNotification(body, icon, title) {
  var options = {
      body: body,
      icon: icon
  };
  var n = new Notification(title, options);
}

规范

规范	状态	备注
Notifications API	现行的标准	活跃的标准

桌面浏览器兼容性

移动浏览器兼容性

1. 在 Chrome 22 之前，对通知的支持遵循了规范的旧前缀版本，并使用 navigator.webkitNotifications 对象实例化新通知。在 Chrome 32 之前，不支持navigator.permission。在 Chrome 42 之前，不支持添加到服务 worker。从 Chrome 49 开始，通知无法在隐身模式下运行。

2. 无论 Chrome 版本是多少，都无法在 Android O 或更高版本上使用。

相关链接

• 使用通知 API