Notifications API
备注: 此特性在 Web Worker 中可用。
Notifications API 允许网页控制向最终用户显示系统通知——这些都在顶层浏览上下文窗口之外,因此即使用户已经切换标签页或移动到不同的应用程序也可以显示。该 API 被设计成与不同平台上的现有通知系统兼容。
概念和用法
在支持该接口的平台上,显示一个系统通知通常涉及两件事。首先,用户需要为当前来源授予权限以显示系统通知,这通常在应用或站点初始化时,使用 Notification.requestPermission()
方法来完成。这应该通过响应用户交互行为来实现,如单击按钮,例如:
btn.addEventListener("click", () => {
let promise = Notification.requestPermission();
// 等待授权
});
这不仅是最佳实践——你不应该向用户发送他们不同意的通知——并且未来的浏览器将明确禁止未响应用户交互而触发的通知。例如,Firefox 从 72 版本开始就已经这样做了。
这将产生一个请求对话框,内容如下:
从这里,用户可以选择允许来自此来源的通知或阻止来自此来源的通知。一旦做出选择,该设置通常将持续用于当前会话。
备注:从 Firefox 44 开始,通知(Notification)和推送(Push)的权限已合并。如果为通知授予权限,推送也将启用。
接下来,使用 Notification()
构造方法创建一个新通知。这个函数必须传递一个标题参数,并且可以选择传递一个选项对象来指定选项,例如文本方向、正文、要显示的图标、要播放的通知的声音等等。
此外,Notifications API 规范对 ServiceWorker API 指定了多个扩展,以允许 Service Worker 发送通知。
备注:想了解怎么在你的应用里使用通知接口,请阅读使用 Notifications API。
接口
Notification
-
定义的通知对象。
NotificationEvent
-
表示在
ServiceWorker
的ServiceWorkerGlobalScope
上下文中触发的通知事件。
其他接口的扩展
notificationclick
事件-
当用户单击显示的通知时触发。
notificationclose
事件-
当用户关闭显示的通知时触发。
ServiceWorkerRegistration.getNotifications()
-
按照通过当前 Service Worker 从当前源创建的通知的顺序返回通知列表。
ServiceWorkerRegistration.showNotification()
-
显示带有请求的标题的通知。
规范
Specification |
---|
Notifications API Standard |
浏览器兼容性
api.Notification
BCD tables only load in the browser
api.ServiceWorkerRegistration.showNotification
BCD tables only load in the browser
api.ServiceWorkerRegistration.getNotifications
BCD tables only load in the browser