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

Notification 接口在 Notifications API is used to configure and display desktop notifications to the user. These notifications' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously provide information to the user.

构造函数

Notification()

Creates a new instance of the Notification 对象。

特性

静态特性

These properties are available only on the Notification 对象自身。

Notification.permission 只读

A string representing the current permission to display notifications. Possible values are:

• denied — The user refuses to have notifications displayed.
• granted — The user accepts having notifications displayed.
• default — The user choice is unknown and therefore the browser will act as if the value were denied.

Notification.maxActions 只读

实例特性

These properties are available only on instances of the Notification 对象。

Notification.actions 只读

The actions array of the notification as specified in the constructor's 选项 参数。

Notification.badge 只读

The URL of the image used to represent the notification when there is not enough space to display the notification itself.

Notification.body 只读

The body string of the notification as specified in the constructor's 选项 参数。

Notification.data 只读

Returns a structured clone of the notification’s data.

Notification.dir 只读

The text direction of the notification as specified in the constructor's 选项 参数。

Notification.lang 只读

The language code of the notification as specified in the constructor's 选项 参数。

Notification.tag 只读

The ID of the notification (if any) as specified in the constructor's 选项 参数。

Notification.icon 只读

The URL of the image used as an icon of the notification as specified in the constructor's 选项 参数。

Notification.image 只读

The URL of an image to be displayed as part of the notification, as specified in the constructor's 选项 参数。

Notification.renotify 只读

Specifies whether the user should be notified after a new notification replaces an old one.

Notification.requireInteraction 只读

布尔 indicating that a notification should remain active until the user clicks or dismisses it, rather than closing automatically.

Notification.silent 只读

Specifies whether the notification should be silent — i.e., no sounds or vibrations should be issued, regardless of the device settings.

Notification.timestamp 只读

Specifies the time at which a notification is created or applicable (past, present, or future).

Notification.title 只读

The title of the notification as specified in the first parameter of the constructor.

Notification.vibrate 只读

Specifies a vibration pattern for devices with vibration hardware to emit.

事件处理程序

Notification.onclick

处理程序为 click event. It is triggered each time the user clicks on the notification.

Notification.onclose

处理程序为 close event. It is triggered when the user closes the notification.

Notification.onerror

处理程序为 error event. It is triggered each time the notification encounters an error.

Notification.onshow

处理程序为 show event. It is triggered when the notification is displayed.

方法

静态方法

These methods are available only on the Notification 对象自身。

Notification.requestPermission()

Requests permission from the user to display notifications.

实例方法

These properties are available only on an instance of the Notification object or through its prototype 。 Notification object also inherits from the EventTarget 接口。

Notification.close()

Programmatically closes a notification instance.

范例

Assume this basic HTML:

<button onclick="notifyMe()">Notify me!</button>
					

It's possible to send a notification as follows — here we present a fairly verbose and complete set of code you could use if you wanted to first check whether notifications are supported, then check if permission has been granted for the current origin to send notifications, then request permission if required, before then sending a notification.

function notifyMe() {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }
  // Let's check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }
  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var 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 any more.
}
					

We no longer show a live sample on this page, as Chrome and Firefox no longer allow notification permissions to be requested from cross-origin <iframe> s, with other browsers to follow. To see a example in action, check out our To-do list example (also see the app running live )。

注意 : In the above example we spawn notifications in response to a user gesture (clicking a button). 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.

规范

规范	状态	注释
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