Chrome notification click on Close button

Question

I use notification API to show popup window on Chrome 73:

new Notification('', {
    icon: "images/transparent.png",
    image: res,
    requireInteraction: true
});
notification.onclose = function () {
    alert('close')
};
notification.onclick= function () {
    alert('click')
};
notification.onerror= function () {
    alert('error');
};
notification.onnotificationclose = function () {
    alert("close")
};

I see this popup:

But the problem is that if user clicks icon with arrow, then onclose is fired, but if user clicks 'Close' aka 'Закрыть' button, no handler is invoked.

How can I handle it? Is it a bug in chrome?

Answer 1

As far as I can tell, when you use the Notification API like in your code snippet, you simply cannot handle events that are triggered by clicking the button in a custom way. It seems that the button being visible at all is a Chrome-specific thing, and it's only caused by setting requireInteraction to true. At least in Firefox and Edge, the button won't show up at all.

As an alternative and assuming you're making use of a Service Worker, you can also trigger the notification using the Service Worker's registration. By that you can also use additional attributes in the notification's options, like actions where you can define a list of buttons that should show up. You can define an action for each button and act accordingly in the Service Worker.
The following code works, tested with Chrome 73. Mind the browser compatibility.

I hope that helps.

index.html

<button onclick="notifyMe()">Notify me!</button>
<script src="main.js"></script>

main.js

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('sw.js');
}

function notifyMe() {
  if (Notification.permission === 'granted') {
    navigator.serviceWorker.getRegistration().then((reg) => {
      var options = {
        body: '<Your Notification Body>',
        icon: '<Your Notification Icon>',
        actions: [
          { action: 'close', title: 'Close' }
        ],
        requireInteraction: true
      };
      reg.showNotification('<Your Notification Title>', options);
    });
  } else {
    Notification.requestPermission();
  }
}

sw.js

self.addEventListener('notificationclick', (event) => {
  if (event.action === 'close') {
    console.log('handle close with button');
    event.notification.close();
  } else {
    console.log('handle notification click');
  }
}, false);

self.addEventListener('notificationclose', (event) => {
  console.log('handle close with arrow');
}, false);