showNotification() 方法在 ServiceWorkerRegistration interface creates a notification on an active service worker.

注意 : This feature is available in Web 工作者 .

句法

​serviceWorkerRegistration.showNotification(title, [options]);
					

参数

title

The title that must be shown within the notification

选项 可选
An object that allows configuring the notification. It can have the following properties:
  • actions : An array of actions to display in the notification. The members of the array should be an object literal. It may contain the following values:
    • action: A DOMString identifying a user action to be displayed on the notification.
    • title: A DOMString containing action text to be shown to the user.
    • icon: A USVString containing the URL of an icon to display with the action.
    Appropriate responses are built using event.action within the notificationclick 事件。
  • badge USVString containing the URL of an image to represent the notification when there is not enough space to display the notification itself such as for example, the Android Notification Bar. On Android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked.
  • body : A string representing an extra content to display within the notification.
  • data : Arbitrary data that you want to be associated with the notification. This can be of any data type.
  • dir : The direction of the notification; it can be auto , ltr or rtl
  • icon USVString containing the URL of an image to be used as an icon by the notification.
  • image USVString containing the URL of an image to be displayed in the notification.
  • lang : Specify the lang used within the notification. This string must be a valid BCP 47 language tag .
  • renotify : A boolean that indicates whether to suppress vibrations and audible alerts when reusing a tag value. If 选项 ’s renotify 为 True 和 选项 ’s tag is the empty string a TypeError will be thrown. The default is false .
  • requireInteraction : Indicates that on devices with sufficiently large screens, a notification should remain active until the user clicks or dismisses it. If this value is absent or false, the desktop version of Chrome will auto-minimize notifications after approximately twenty seconds. The default value is false .
  • silent : When set indicates that no sounds or vibrations should be made. If 选项 ’s silent 为 True 和 选项 ’s vibrate is present a TypeError exception will be thrown. The default value is false .
  • tag : An ID for a given notification that allows you to find, replace, or remove the notification using a script if necessary.
  • timestamp : A DOMTimeStamp representing the time when the notification was created. It can be used to indicate the time at which a notification is actual. For example, this could be in the past when a notification is used for a message that couldn’t immediately be delivered because the device was offline, or in the future for a meeting that is about to start.
  • vibrate : A vibration pattern to run with the display of the notification. A vibration pattern can be an array with as few as one member. The values are times in milliseconds where the even indices (0, 2, 4, etc.) indicate how long to vibrate and the odd indices indicate how long to pause. For example, [300, 100, 400] would vibrate 300ms, pause 100ms, then vibrate 400ms.

返回值

A Promise that resolves to undefined .

范例

navigator.serviceWorker.register('sw.js');
function showNotification() {
  Notification.requestPermission(function(result) {
    if (result === 'granted') {
      navigator.serviceWorker.ready.then(function(registration) {
        registration.showNotification('Vibration Sample', {
          body: 'Buzz! Buzz!',
          icon: '../images/touch/chrome-touch-icon-192x192.png',
          vibrate: [200, 100, 200, 100, 200, 100, 200],
          tag: 'vibration-sample'
        });
      });
    }
  });
}
					

To invoke the above function at an appropriate time, you could use the ServiceWorkerGlobalScope.onnotificationclick event handler.

You can also retrieve details of the Notification s that have been fired from the current service worker using ServiceWorkerRegistration.getNotifications() .

规范

规范 状态 注释
Notifications API
The definition of 'showNotification()' in that specification.
实时标准 初始定义。

浏览器兼容性

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
showNotification Chrome 40 Edge 17
17
16 Disabled
Disabled From version 16: this feature is behind the Enable service workers preference.
Firefox 46
46
Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.
IE No Opera 27 Safari No WebView Android 40 Chrome Android 40 Firefox Android 46 Opera Android 27 Safari iOS No Samsung Internet Android 4.0
actions Chrome 45 Edge ≤79 Firefox No IE No Opera 32 Safari No WebView Android 45 Chrome Android 45 Firefox Android No Opera Android 32 Safari iOS No Samsung Internet Android 5.0
badge Chrome 53 Edge ≤79 Firefox No IE No Opera 39 Safari No WebView Android 53 Chrome Android 53 Firefox Android No Opera Android 41 Safari iOS No Samsung Internet Android 6.0
data Chrome 44 Edge ≤79 Firefox No IE No Opera 31 Safari No WebView Android 44 Chrome Android 44 Firefox Android No Opera Android 32 Safari iOS No Samsung Internet Android 4.0
image Chrome 56 Edge ≤79 Firefox No IE No Opera 43 Safari No WebView Android 56 Chrome Android 56 Firefox Android No Opera Android 43 Safari iOS No Samsung Internet Android 6.0
renotify Chrome 50 Edge ≤79 Firefox No IE No Opera 37 Safari No WebView Android 50 Chrome Android 50 Firefox Android No Opera Android 37 Safari iOS No Samsung Internet Android 5.0
requireInteraction Chrome 47 Edge ≤79 Firefox No IE No Opera 34 Safari No WebView Android 47 Chrome Android 47 Firefox Android No Opera Android 34 Safari iOS No Samsung Internet Android 5.0
vibrate Chrome 45 Edge ≤79 Firefox No IE No Opera 32 Safari No WebView Android 45 Chrome Android 45 Firefox Android No Opera Android 32 Safari iOS No Samsung Internet Android 5.0

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

  • 最后修改: