この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ 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 to configure 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
containg the URL of an icon to display with the action.
event.action
within thenotificationclick
event.- action: A
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 beauto
,ltr
, orrtl
icon
: The URL of an image to be used as an icon by the notification.image
: aUSVSTring
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 supress vibrations and audible alerts when resusing atag
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 isfalse
.tag
: An ID for a given notification that allows you to find, replace, or remove the notification using 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 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 Notification
s have 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
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 40 | 161 17 | 462 | No | 27 | No |
actions | 45 | ? | No | No | 32 | No |
badge | 53 | ? | No | No | 39 | No |
data | 44 | ? | No | No | 31 | No |
image | 56 | ? | No | No | 43 | No |
renotify | 50 | ? | No | No | 37 | No |
requireInteraction | 47 | ? | No | No | 34 | No |
vibrate | 45 | ? | No | No | 32 | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Basic support | 40 | 40 | ? | 46 | 27 | No | 4.0 |
actions | 45 | 45 | ? | No | 32 | No | 5.0 |
badge | 53 | 53 | ? | No | 39 | No | 6.0 |
data | 44 | 44 | ? | No | 31 | No | 4.0 |
image | 56 | 56 | ? | No | 43 | No | 6.0 |
renotify | 50 | 50 | ? | No | 37 | No | 5.0 |
requireInteraction | 47 | 47 | ? | No | 34 | No | 5.0 |
vibrate | 45 | 45 | ? | No | 32 | No | 5.0 |
1. From version 16: this feature is behind the Enable service workers
preference.
2. Service workers (and Push) have been disabled in the Firefox 45 and 52 Extended Support Releases (ESR).
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
vibrate option |
45 | ? | No support | ? | 32 | ? |
requireInteraction |
47 | ? | No support | ? | ? | ? |
actions option |
48 | ? | No support | ? | ? | ? |
renotify option |
50 | ? | No support | ? | 37 | ? |
badge option |
53 | ? | ? | ? | 39 | ? |
image option |
56 | ? | ? | ? | ? | ? |
data option |
44 | ? | No support | No support | ? | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
vibrate option |
No support | No support | No support | No support | ? | 32 | ? | 45 |
requireInteraction |
No support | No support | No support | No support | ? | ? | ? | 47 |
actions option |
No support | No support | No support | No support | ? | ? | ? | 48 |
renotify option |
No support | No support | No support | No support | ? | 37 | ? | 50 |
badge option |
No support | No support | ? | ? | ? | 39 | ? | 53 |
image option |
No support | No support | ? | ? | ? | ? | ? | 56 |
data option |
No support | No support | No support | No support | No support | ? | No support | 44 |