Notification
注意:此功能在 Web Workers 中可用。
Notification 接口是 Notifications API 的一部分,用于配置和向用户显示桌面通知。
这些通知的外观和特定功能因平台而异,但它们通常提供一种异步向用户提供信息的方式。
构造函数
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 的事件.
示例
假设此基本 HTML
<button>Notify me!</button>
可以通过以下方式发送通知 - 这里我们提供了一套相当冗长且完整的代码,如果您想先检查是否支持通知,然后检查当前源是否已被授予发送通知的权限,如果需要则请求权限,然后再发送通知,就可以使用这些代码。
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 |
浏览器兼容性
加载中…