通知
注意:此功能在Web Workers中可用。
通知 API的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
<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 版开始已经这样做了。
规范
规范 |
---|
通知 API 标准 # api |
浏览器兼容性
BCD 表仅在启用 JavaScript 的浏览器中加载。