ServiceWorkerRegistration.showNotification()

この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください!
この記事を English (US) で読むこともできます。

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The showNotification() method of the ServiceWorkerRegistration interface creates a notification on an active service worker.

Note: This feature is available in Web Workers.

Syntax

​ServiceWorkerRegistration.showNotification(title, [options]).then(function(NotificationEvent) { ... });

Returns

A Promise that resolves to a NotificationEvent.

Parameters

title
The title that must be shown within the notification
options Optional
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 event.
  • badge: 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.
  • dir : The direction of the notification; it can be,autoltr, or rtl
  • icon: The URL of an image to be used as an icon by the notification.
  • image: a 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. 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.
  • tag: An ID for a given notification that allows you to find, replace, or remove the notification using a script if necessary.
  • 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.
  • data: Arbitrary data that you want to be associated with the notification. This can be of any data type.

Examples

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 Notifications that have been fired from the current service worker using ServiceWorkerRegistration.getNotifications().

Specifications

Specification Status Comment
Notifications API
The definition of 'showNotification()' in that specification.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 40Edge Full support 17
Full support 17
Full support 16
Disabled
Disabled From version 16: this feature is behind the Enable service workers preference.
Firefox Full support 46
Notes
Full support 46
Notes
Notes Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR).
IE No support NoOpera Full support 27Safari No support NoWebView Android Full support 40Chrome Android Full support 40Edge Mobile ? Firefox Android Full support 46Opera Android Full support 27Safari iOS No support NoSamsung Internet Android Full support 4.0
actions
Experimental
Chrome Full support 45Edge ? Firefox No support NoIE No support NoOpera Full support 32Safari No support NoWebView Android Full support 45Chrome Android Full support 45Edge Mobile ? Firefox Android No support NoOpera Android Full support 32Safari iOS No support NoSamsung Internet Android Full support 5.0
badge
Experimental
Chrome Full support 53Edge ? Firefox No support NoIE No support NoOpera Full support 39Safari No support NoWebView Android Full support 53Chrome Android Full support 53Edge Mobile ? Firefox Android No support NoOpera Android Full support 39Safari iOS No support NoSamsung Internet Android Full support 6.0
data
Experimental
Chrome Full support 44Edge ? Firefox No support NoIE No support NoOpera Full support 31Safari No support NoWebView Android Full support 44Chrome Android Full support 44Edge Mobile ? Firefox Android No support NoOpera Android Full support 31Safari iOS No support NoSamsung Internet Android Full support 4.0
image
Experimental
Chrome Full support 56Edge ? Firefox No support NoIE No support NoOpera Full support 43Safari No support NoWebView Android Full support 56Chrome Android Full support 56Edge Mobile ? Firefox Android No support NoOpera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 6.0
renotify
Experimental
Chrome Full support 50Edge ? Firefox No support NoIE No support NoOpera Full support 37Safari No support NoWebView Android Full support 50Chrome Android Full support 50Edge Mobile ? Firefox Android No support NoOpera Android Full support 37Safari iOS No support NoSamsung Internet Android Full support 5.0
requireInteraction
Experimental
Chrome Full support 47Edge ? Firefox No support NoIE No support NoOpera Full support 34Safari No support NoWebView Android Full support 47Chrome Android Full support 47Edge Mobile ? Firefox Android No support NoOpera Android Full support 34Safari iOS No support NoSamsung Internet Android Full support 5.0
vibrate
Experimental
Chrome Full support 45Edge ? Firefox No support NoIE No support NoOpera Full support 32Safari No support NoWebView Android Full support 45Chrome Android Full support 45Edge Mobile ? Firefox Android No support NoOpera Android Full support 32Safari iOS No support NoSamsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.