Pushpad Logo Pushpad

Action buttons

Currently action buttons are displayed only by Chrome. Chrome displays at most 2 buttons per notification.

If you use Pushpad Pro, you may need to update your service worker in order to display action buttons.

You can include action buttons inside your notifications. In this way, a notification can have multiple links or actions.

Action buttons

When you send a notification you can add any number of action buttons. Each action button has the following fields:

Usually when you create an action button you set a link that will be opened in a new window when the button is clicked. However developers can also define custom Javascript actions that are executed in background. For example you may define a button called "Like" that saves the reaction of the user in background without opening a window.

In order to bind a Javascript function to a button, you first need to define the function inside your service worker:

service-worker.js
self.notificationActions = {

  // Your custom actions must be defined here

  exampleAction: function (customData) {
    console.log('exampleAction called with data: ' + customData);

    // You can use the notification "custom data" field to pass a param to your actions
    var itemId = customData;

    // All actions must return a Promise
    return fetch('/item/' + itemId + '/like', { method: "POST" });
  }
};

The actions must be defined as properties of the self.notificationActions object. Then, when you send a notification, you can bind an action to a button by entering the name of that action in the Action field.

You can pass an argument to your action by entering a value for the Custom data field when you send the notification.

Note that all actions must return a Promise.