Notifications API - 允许网页控制向终端用户显示的系统通知

备注： 此特性在 Web Worker 中可用

安全上下文

此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

Notifications API（通知 API）允许网页控制向终端用户显示的系统通知。这些通知位于顶级浏览上下文视口之外，因此即使用户切换选项卡或移动到不同的应用程序也可以显示。API 旨在与现有通知系统兼容，以及跨平台。

概念和用法

在支持的平台上，显示系统通知通常涉及两件事。首先，用户需要授予当前源显示系统通知的权限，这通常在应用程序或站点初始化时完成，使用 Notification.requestPermission() 方法。它应该响应用户手势来完成，例如单击按钮，例如：

btn.addEventListener('click', function() {
  let promise = Notification.requestPermission();
  // 等待许可
})

这不仅是最佳实践 —— 你不应该用他们不同意的通知向用户发送垃圾信息 —— 而且浏览器将明确禁止未响应用户手势触发的通知。例如，Firefox 已经从 72 版开始这样做。

这将生成一个请求对话框，如下所示：

从这里，用户可以选择允许来自该来源的通知，或阻止它们。一旦做出选择，该设置通常会在当前会话中持续存在。

注意： 从 Firefox 44 开始，通知和 Push 的权限已合并。如果授予通知权限，也将启用推送。

接下来，使用 Notification() 构造函数创建一个新通知。它必须传递一个标题参数，并且可以选择传递一个选项对象来指定选项，例如文本方向、正文、要显示的图标、要播放的通知声音等。

此外，通知 API 规范为 ServiceWorker API 指定了许多附加内容，以允许服务工作线程触发通知。

注意： 要了解有关在您自己的应用程序中使用通知的更多信息，请阅读 使用通知 API。

通知接口

Notification

定义一个通知对象。

服务工作线程扩展

ServiceWorkerRegistration

包括 ServiceWorkerRegistration.showNotification() 和 ServiceWorkerRegistration.getNotifications() 方法，用于控制显示通知。

ServiceWorkerGlobalScope

包括 ServiceWorkerGlobalScope.onnotificationclick 处理程序，用于在单击通知时触发自定义函数。

NotificationEvent

一种特定类型的事件对象，基于 ExtendableEvent，表示已触发的通知。

规范

规范
Notifications API Living Standard

桌面浏览器兼容性

特性	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基础支持	201 2	14	22 4moz	不支持	234 5	7
Notification() 构造函数	20	14	22 4moz	不支持	23	7
actions	53	18	不支持	不支持	39	不支持
badge	53	18	不支持	不支持	39	不支持
body	33	14	26	不支持	23	11
click 事件	20	14	22	不支持	23	7
close	20	14	22	不支持	23	7
close 事件	20	14	22	不支持	23	7
data	44	16	34	不支持	31	16
dir	20	14	26	不支持	23	7
error 事件	20	14	22	不支持	23	7
icon	33	14	26	不支持	23	11
image	53	18	不支持	不支持	40	不支持
lang	33	14	26	不支持	23	11
maxActions	48	18	不支持	不支持	35	不支持
permission	32	14	22	不支持	23	7
renotify	50	79	不支持	不支持	37	不支持
requestPermission	20	14	2211 12	不支持	23	15 7 — 1515
requireInteraction	47	17	不支持	不支持	34	不支持
需要安全上下文	62	79	67	不支持	49	不支持
show 事件	20	14	22	不支持	23	7
silent	43	17	不支持	不支持	30	不支持
tag	20	14	26	不支持	23	7
timestamp	50	17	不支持	不支持	37	不支持
title	33	14	26	不支持	23	11
vibrate	53	79	不支持	不支持	40	不支持
在 Worker 中可用	42	15	41	不支持	29	不支持

移动浏览器兼容性

特性	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
基础支持	不支持10	421 3	未知	22 4moz	未知	296 7	不支持
Notification() 构造函数	不支持	不支持	未知	22 4moz	未知	不支持	不支持
actions	不支持	53	未知	不支持	未知	41	不支持
badge	不支持	53	未知	不支持	未知	41	不支持
body	不支持	42	未知	26	未知	29	不支持
click 事件	不支持	42	未知	22	未知	29	不支持
close	不支持	42	未知	22	未知	29	不支持
close 事件	不支持	42	未知	22	未知	29	不支持
data	不支持	44	未知	34	未知	32	不支持
dir	不支持	42	未知	26	未知	29	不支持
error 事件	不支持	42	未知	22	未知	29	不支持
icon	不支持	42	未知	26	未知	29	不支持
image	不支持	53	未知	不支持	未知	41	不支持
lang	不支持	42	未知	26	未知	29	不支持
maxActions	不支持	48	未知	不支持	未知	35	不支持
permission	不支持	42	未知	22	未知	29	不支持
renotify	不支持	50	未知	不支持	未知	37	不支持
requestPermission	不支持	42	未知	2213 14	未知	29	不支持
requireInteraction	不支持	47	未知	不支持	未知	34	不支持
需要安全上下文	不支持	62	未知	67	未知	46	不支持
show 事件	不支持	42	未知	22	未知	29	不支持
silent	不支持	43	未知	不支持	未知	30	不支持
tag	不支持	42	未知	26	未知	29	不支持
timestamp	不支持	50	未知	不支持	未知	37	不支持
title	不支持	42	未知	26	未知	29	不支持
vibrate	不支持	5316	未知	不支持	未知	4116	不支持
在 Worker 中可用	不支持	42	未知	41	未知	29	不支持

1. Starting in Chrome 49, notifications do not work in incognito mode.

2. Before Chrome 42, service worker additions were not supported.

3. Notifications in Chrome for Android are only available through service workers. To show notifications on Android, see ServiceWorkerRegistration.showNotification().

4. Starting in Opera 36, notifications do not work in incognito mode.

5. Before Opera 29, service worker additions were not supported.

6. Notifications in Opera for Android are only available through service workers. To show notifications on Android, see ServiceWorkerRegistration.showNotification().

7. Starting in Opera for Android 36, notifications do not work in incognito mode.

8. Notifications in Samsung Internet are only available through service workers. To show notifications on Android, see ServiceWorkerRegistration.showNotification().

9. Starting in Samsung Internet 5.0, notifications do not work in incognito mode.

10. See bug 551446.

11. From Firefox 70 onwards, cannot be called from a cross-origin iframe.

12. 从 Firefox 72 开始，只能在响应用户手势（例如 click 事件）时调用。

13. From Firefox Android 79 onwards, cannot be called from a cross-origin iframe.

14. From Firefox Android 79 onwards, can only be called in response to a user gesture such as a click event.

15. Only supported the deprecated callback syntax.

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

相关链接

• 使用 Notifications API