Notification
备注: 此特性在 Web Worker 中可用
Notifications API 的接口 Notification
用于配置以向用户显示桌面通知。
这些通知的外观和功能因平台而异,但通常它们会提供一种异步向用户提供信息的方式。
构造函数
Notification()
-
创建一个新的
Notification
实例对象。
静态属性
这些属性只能用于 Notification
对象自身。
Notification.permission
只读-
一个字符串,表示当前显示通知的权限。可能的值是:
denied
——用户拒绝显示通知。granted
——用户接受显示通知。default
——用户选择是未知的,因此浏览器的行为类似于值是 denied。
Notification.maxActions
(en-US) 只读 实验性-
设备和用户代理支持的最大的操作数量。
实例属性
这些属性仅用于 Notification
实例对象上。
Notification.actions
只读 实验性-
在构造函数的
options
参数中指定的通知的操作数组。 Notification.badge
只读 实验性-
当没有足够的空间去显示通知自身时,用于表示通知图像的 URL。
Notification.body
只读-
在构造函数的
options
参数中指定的通知的正文字符串。 Notification.data
只读-
返回一个通知数据的结构化克隆。
Notification.dir
只读-
在构造函数的
options
参数中指定的通知的文本方向。 Notification.lang
(en-US) 只读-
在构造函数的
options
参数中指定的通知的语言。 Notification.tag
(en-US) 只读-
在构造函数的
options
参数中指定的通知的 ID(如果有的话)。 Notification.icon
只读-
在构造函数的
options
参数中用作指定通知图标的图像 URL。 Notification.image
只读 实验性-
作为通知的一部分显示的图像 URL,在构造函数的选项参数中指定。
Notification.renotify
只读 实验性-
指定在新通知取代旧通知后,是否应该通知用户。
Notification.requireInteraction
只读 实验性-
一个布尔值,表示通知应该保持活动状态,直到用户点击或者关掉它,而不是自动关闭。
Notification.silent
(en-US) 只读 实验性-
指定通知是否应该静音——即,无论设备的设置如何,都不应发出声音和摆动。
Notification.timestamp
(en-US) 只读 实验性-
指定通知创建或者应用时(过去、现在或者未来)的时间。
Notification.title
(en-US) 只读-
在构造函数第一个参数中指定的通知标题。
Notification.vibrate
(en-US) 只读 实验性-
为拥有振动硬件的终端设备指定振动模式。
静态方法
这些属性只能用于 Notification
对象自身。
Notification.requestPermission()
-
请求用户允许显示通知。
实例方法
这些属性仅用于 Notification
实例对象或者通过 prototype
提供。Notification
对象也继承自 EventTarget
接口。
Notification.close()
-
以编程方式关闭通知实例。
事件
示例
假定有如下 HTML:
<button onclick="notifyMe()">Notify me!</button>
可能按以下方式发送通知——在这里,我们提供了一个相当冗长且完整的代码,如果你想要首先检查通知是否受支持,然后检查用户是否已授予当前来源发送通知的权限,然后根据需要请求权限,最后发送一个通知。
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 开始就这么做了。
规范
Specification |
---|
Notifications API Standard # api |
浏览器兼容性
BCD tables only load in the browser