Push notifications with call to actions

Hi,

Thanks for getting in touch. You can customise the display of notifications using the following process:

Ensure you are handling the notifications as per https://pusher.com/docs/beams/guides/handle-incoming-notifications/web Building the notification as per the web API specification. This should happen within the code mentioned in the above link (PusherPushNotifications.onNotificationReceived)

For example, I have the following code to customise the notification with a new icon and with some action buttons:

PusherPushNotifications.onNotificationReceived = ({
 payload,
 pushEvent,
 handleIncomingNotification,
  }) => {

 const options = {
 icon: "http://localhost:9000/assets/london-icon.png",
 actions: [
                {
 action: 'coffee-action',
 title: 'Coffee',
 icon: "http://localhost:9000/assets/london-icon.png"
                },
                {
 action: 'doughnut-action',
 title: 'Doughnut',
 icon: "http://localhost:9000/assets/london-icon.png"
                }
            ]
        };
 console.log('handlenotif');
 pushEvent.waitUntil(self.registration.showNotification(payload.notification.title, options));
  }

Notifications created in this way are always displayed in the relevant notification tray in the OS of the user. For example, MacOS will hide the action buttons by default and only display them when a user clicks the Options button after hovering over the notification.

pusher / push-notifications-web

Push notifications with call to actions #89