Notifications API

注意: 此特征可用于 Web 工作者 .

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers .

The Notifications API allows web pages to control the display of system notifications to the end user. These are outside the top-level browsing context viewport, so therefore can be displayed even when the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems, across different platforms.

概念和用法

On supported platforms, showing a system notification generally involves two things. First, the user needs to grant the current origin permission to display system notifications, which is generally done when the app or site initialises, using the Notification.requestPermission() method. This should be done in response to a user gesture, such as clicking a button, for example:

btn.addEventListener('click', function() {
  let promise = Notification.requestPermission();
  // wait for permission
})
					

This is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward browsers will explicitly disallow notifications not triggered in response to a user gesture. Firefox is already doing this from version 72, for example.

This will spawn a request dialog, along the following lines:

From here the user can choose to allow notifications from this origin, or block them. Once a choice has been made, the setting will generally persist for the current session.

注意 : As of Firefox 44, the permissions for Notifications and Push have been merged. If permission is granted for notifications, push will also be enabled.

Next, a new notification is created using the Notification() constructor. This must be passed a title argument, and can optionally be passed an options object to specify options, such as text direction, body text, icon to display, notification sound to play, and more.

In addition, the Notifications API spec specifies a number of additions to the ServiceWorker API , to allow service workers to fire notifications.

注意 : To find out more about using notifications in your own app, read Using the Notifications API .

Notifications interfaces

Notification
Defines a notification object.

Service worker additions

ServiceWorkerRegistration
Includes the ServiceWorkerRegistration.showNotification() and ServiceWorkerRegistration.getNotifications() method, for controlling the display of notifications.
ServiceWorkerGlobalScope
Includes the ServiceWorkerGlobalScope.onnotificationclick handler, for firing custom functions when a notification is clicked.
NotificationEvent
A specific type of event object, based on ExtendableEvent , which represents a notification that has fired.

规范

规范 状态 Comment
Notifications API 实时标准 Living standard

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
Notification Chrome 22
22
Before Chrome 22, the support for notification followed an old prefixed version of the specification and used the navigator.webkitNotifications object to instantiate a new notification. Before Chrome 32, Notification.permission was not supported. Before Chrome 42, service worker additions were not supported. Starting in Chrome 49, notifications do not work in incognito mode.
5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge 14 Firefox 22
22
4
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No Opera 25 Safari 6 WebView Android No Chrome Android Yes Firefox Android 22
22
4
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Opera Android Yes Safari iOS No Samsung Internet Android Yes
Notification() 构造函数 Chrome 22
22
5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge ≤18 Firefox 22
22
4
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No Opera 25 Safari 6 WebView Android No Chrome Android Yes Firefox Android 22
22
4
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Yes Safari iOS No Samsung Internet Android Yes
actions Chrome 53 Edge 18 Firefox No IE No Opera 39 Safari ? WebView Android No Chrome Android 53 Firefox Android No Opera Android 41 Safari iOS No Samsung Internet Android 6.0
badge Chrome 53 Edge 18 Firefox No IE No Opera 39 Safari ? WebView Android No Chrome Android 53 Firefox Android No Opera Android 41 Safari iOS No Samsung Internet Android 6.0
body Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
close Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
data Chrome Yes Edge 16 Firefox Yes IE No Opera Yes Safari ? WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
dir Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
icon Chrome 22
22
5
Prefixed
Prefixed Implemented with the vendor prefix: webkit
Edge 14 Firefox 22
22
4
Prefixed
Prefixed Implemented with the vendor prefix: moz
IE No Opera 25 Safari No WebView Android No Chrome Android Yes Firefox Android 22
22
4
Prefixed
Prefixed Implemented with the vendor prefix: moz
Opera Android Yes Safari iOS No Samsung Internet Android Yes
image Chrome 53 Edge 18 Firefox No IE No Opera 40 Safari ? WebView Android No Chrome Android 53 Firefox Android No Opera Android 41 Safari iOS No Samsung Internet Android 6.0
lang Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
maxActions Chrome Yes Edge 18 Firefox No IE No Opera Yes Safari ? WebView Android No Chrome Android Yes Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android Yes
onclick Chrome Yes Edge 14 Firefox 22 IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android Yes
onclose Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
onerror Chrome Yes Edge 14 Firefox No IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android Yes
onshow Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
permission Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
renotify Chrome 50 Edge 79 Firefox No IE No Opera 37 Safari No WebView Android No Chrome Android 50 Firefox Android No Opera Android 37 Safari iOS No Samsung Internet Android 5.0
requestPermission Chrome 46 Edge 14 Firefox 47
47
From Firefox 70 onwards, cannot be called from a cross-origin IFrame.
From Firefox 72 onwards, can only be called in response to a user gesture such as a click 事件。
IE No Opera 40 Safari Yes WebView Android No Chrome Android 46 Firefox Android Yes Opera Android 41 Safari iOS No Samsung Internet Android 5.0
requireInteraction Chrome Yes Edge 17 Firefox No IE No Opera Yes Safari ? WebView Android No Chrome Android Yes Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android Yes
Secure context required Chrome 62 Edge ≤79 Firefox 67 IE No Opera 49 Safari ? WebView Android No Chrome Android 62 Firefox Android 67 Opera Android 46 Safari iOS No Samsung Internet Android 8.0
silent Chrome 43 Edge 17 Firefox No IE No Opera 30 Safari No WebView Android No Chrome Android 43 Firefox Android No Opera Android 30 Safari iOS No Samsung Internet Android 4.0
tag Chrome Yes Edge 14 Firefox Yes IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS No Samsung Internet Android Yes
timestamp Chrome Yes Edge 17 Firefox No IE No Opera Yes Safari ? WebView Android No Chrome Android Yes Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android Yes
title Chrome Yes Edge 14 Firefox No IE No Opera Yes Safari Yes WebView Android No Chrome Android Yes Firefox Android No Opera Android Yes Safari iOS No Samsung Internet Android Yes
vibrate Chrome No Edge No Firefox No IE No Opera No Safari ? WebView Android No Chrome Android 53
53
Does not work on Android O or later regardless of Chrome version.
Firefox Android No Opera Android 41
41
Does not work on Android O or later regardless of Chrome version.
Safari iOS No Samsung Internet Android 6.0
6.0
Does not work on Android O or later regardless of Chrome version.
Available in workers Chrome 45 Edge ≤18 Firefox 41 IE No Opera 32 Safari ? WebView Android No Chrome Android 45 Firefox Android 41 Opera Android 32 Safari iOS No Samsung Internet Android 5.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
见实现注意事项。
要求使用供应商前缀或不同名称。
要求使用供应商前缀或不同名称。

另请参阅