Web/API/ServiceWorkerRegistration/showNotification

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]);

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: a 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: a USVString containing 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. If options’s renotify is true and options’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 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 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.

Return value

A Promise that resolves to undefined.

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 APIThe definition of 'showNotification()' in that specification.	Living Standard	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`showNotification` Experimental'	Chrome Full support 40	Edge 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' Extended Support Releases (ESR) before Firefox 78 ESR do not support service workers and the Push API.	IE No support No	Opera Full support 27	Safari No support No	WebView Android Full support 40	Chrome Android Full support 40	Firefox Android Full support 46	Opera Android Full support 27	Safari iOS No support No	Samsung Internet Android Full support 4.0
`actions` Experimental'	Chrome Full support 45	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support 32	Safari No support No	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android No support No	Opera Android Full support 32	Safari iOS No support No	Samsung Internet Android Full support 5.0
`badge` Experimental'	Chrome Full support 53	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support 39	Safari No support No	WebView Android Full support 53	Chrome Android Full support 53	Firefox Android No support No	Opera Android Full support 41	Safari iOS No support No	Samsung Internet Android Full support 6.0
`data` Experimental'	Chrome Full support 44	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support 31	Safari No support No	WebView Android Full support 44	Chrome Android Full support 44	Firefox Android No support No	Opera Android Full support 32	Safari iOS No support No	Samsung Internet Android Full support 4.0
`image` Experimental'	Chrome Full support 56	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support 43	Safari No support No	WebView Android Full support 56	Chrome Android Full support 56	Firefox Android No support No	Opera Android Full support 43	Safari iOS No support No	Samsung Internet Android Full support 6.0
`renotify` Experimental'	Chrome Full support 50	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support 37	Safari No support No	WebView Android Full support 50	Chrome Android Full support 50	Firefox Android No support No	Opera Android Full support 37	Safari iOS No support No	Samsung Internet Android Full support 5.0
`requireInteraction` Experimental'	Chrome Full support 47	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support 34	Safari No support No	WebView Android Full support 47	Chrome Android Full support 47	Firefox Android No support No	Opera Android Full support 34	Safari iOS No support No	Samsung Internet Android Full support 5.0
`vibrate` Experimental'	Chrome Full support 45	Edge Full support ≤79	Firefox No support No	IE No support No	Opera Full support 32	Safari No support No	WebView Android Full support 45	Chrome Android Full support 45	Firefox Android No support No	Opera Android Full support 32	Safari iOS No support No	Samsung Internet Android Full support 5.0

Legend

Full support: Full support
No support: No support
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.

ServiceWorkerRegistration.showNotification() by Mozilla Contributors is licensed under CC-BY-SA 2.5.