Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

ServiceWorkerRegistration.showNotification()

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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.
    Appropriate responses are built using event.action within the notificationclick event.
  • body: A string representing an extra content to display within the notification.
  • dir : The direction of the notification; it can be auto, ltr, or rtl
  • icon: The URL of an image to be used as an icon by 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 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 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'
        });
      });
    }
  });
}

 

Specifications

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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 42 44.0 (44.0)[1] ? ? ?
vibrate option 45 No support      
requireInteraction 47 No support      
actions option 48 No support      
renotify option 50 No support      
Feature Android Android Webview Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support No support No support 44.0 (44.0) (Yes) ? ? ? 42
vibrate option No support No support No support No support       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       50

[1] Service workers (and Push) have been disabled in the Firefox 45 Extended Support Release (ESR.)

Document Tags and Contributors

 Last updated by: kitcambridge,