W3cubDocs

/Web APIs

ServiceWorkerRegistration: showNotification() method

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

Note: This feature is available in Web Workers.

Syntax

js

showNotification(title)
showNotification(title, options)

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 Experimental

An array of actions to display in the notification. Each element in the array is an object with the following members:

action

A string identifying a user action to be displayed on the notification.

title

A string containing action text to be shown to the user.

icon

A string containing the URL of an icon to display with the action.

Appropriate responses are built using event.action within the notificationclick event.

badge Experimental

a string 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 Experimental

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

a string containing the URL of an image to be used as an icon by the notification.

image Experimental

a string 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 language tag according to RFC 5646: Tags for Identifying Languages (also known as BCP 47).

renotify Experimental

A boolean that indicates whether to suppress vibrations and audible alerts when reusing a tag value. If options's renotify is true and options's tag is the empty string a TypeError will be thrown. The default is false.

requireInteraction Experimental

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 options's silent is true and options'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 timestamp, given as Unix time in milliseconds, representing the time associated with the notification. 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 Experimental

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.

Return value

A Promise that resolves to undefined.

Examples

js

navigator.serviceWorker.register("sw.js");

function showNotification() {
  Notification.requestPermission().then((result) => {
    if (result === "granted") {
      navigator.serviceWorker.ready.then((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 onnotificationclick event handler.

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
showNotification 42 17 44 No 29
16Supported on macOS 13 and later
No 42 44 29 16.4 4.0
options_actions_parameter 48 18 No No 35 No No 48 No 35 No 5.0
options_badge_parameter 53 ≤79 No No 39
17Badging is supported for web apps saved to the Dock in Safari 17 on the macOS Sonoma beta
No 53 No 41 16.4 6.0
options_data_parameter 44 ≤79 No No 31 No No 44 No 32 No 4.0
options_image_parameter 56 ≤79 No No 43 No No 56 No 43 No 6.0
options_renotify_parameter 50 ≤79 No No 37 No No 50 No 37 No 5.0
options_requireInteraction_parameter 47 ≤79 No No 34 No No 47 No 34 No 5.0
options_vibrate_parameter 45 ≤79 No No 32 No No
NoIn Android Oreo and above, setting this parameter has no effect.
No
NoIn Android Oreo and above, setting this parameter has no effect.
No
NoIn Android Oreo and above, setting this parameter has no effect.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/showNotification