Notification: actions property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Note: This feature is available in Web Workers.
The actions read-only property of the Notification interface provides the actions available for users to select when interacting with the notification.
Value
A read-only array of actions. 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.
-
A string containing a URL to navigate to when the user activates this action. When set, the user agent navigates to this URL instead of firing the
notificationclickevent. SeeNotification.navigatefor more information.
Description
Notification actions are buttons or controls that appear within persistent notifications.
They are set using the actions option of the second argument of the showNotification() method.
Note that actions are not available for non-persistent notifications.
If you pass an options object with an actions property that is anything other than null to the Notification() constructor, a TypeError is thrown.
Clicking the button associated with an action navigates to the URL set in the navigate option if one is specified.
Otherwise, it fires a notificationclick event on the service worker that includes the action that was selected (and the associated Notification instance), so the worker can handle it without the user ever switching to your page.
Note:
Browsers typically limit the maximum number of actions they will display for a particular notification.
Check the static Notification.maxActions property to determine the limit.
Examples
Basic usage
The following code shows how a service worker might listen for the notificationclick event and use it to retrieve both the clicked action and an array of all actions.
// sw.js
self.addEventListener("notificationclick", (event) => {
const clickedAction = event.action; // e.g. "reply" or "" if body was clicked
// Read all defined actions
const notification = event.notification; // the Notification object
console.log(notification.actions); // full array of action objects
notification.close();
});
Specifications
| Specification |
|---|
| Notifications API # dom-notification-actions |