NotificationAction

Note: This feature is available in Web Workers

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The NotificationAction interface of the Notifications API is used to represent action buttons the user can click to interact with notifications.

These buttons' appearance and specific functionality vary across platforms but generally they provide a way to asynchronously show actions to the user in a notification.

Properties

Instance properties

These properties are available only on instances of the Notification object.

NotificationAction.action Read only

The name of the action, which can be used to identify the clicked action similar to input names.

NotificationAction.title Read only

The string describing the action that is displayed to the user.

NotificationAction.icon Read only

The URL of the image used to represent the notification when there is not enough space to display the notification itself.

Example

Notifications can fire notificationclick events on the ServiceWorkerGlobalScope.

Here a service worker shows a notification with a single "Archive" action, allowing users to perform this common task from the notification without having to open the website. The user can also click the main body of the notification to open their inbox instead.

self.registration.showNotification("New mail from Alice", {
  actions: [
    {
      action: 'archive',
      title: 'Archive'
    }
  ]
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  if (event.action === 'archive') {
    // Archive action was clicked
    archiveEmail();
  } else {
    // Main body of notification was clicked
    clients.openWindow('/inbox');
  }
}, false);

Specifications

No specification found

No specification data found for api.NotificationAction.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

No compatibility data found for api.NotificationAction.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also

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