安全上下文
此特征只可用于 安全上下文 (HTTPS)，在某些或所有 支持浏览器 .

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.

规范

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

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	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

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

见实现注意事项。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• Using the Notifications API

元数据

• 最后修改： Jul 23, 2020