Chrome通知点击关闭按钮

Question

我使用通知API在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")
};

我看到这个弹出窗口：

但是问题在于，如果用户单击带有箭头的图标，则会触发onclose，但是如果用户单击“关闭”（又名“Закрыть”）按钮，则不会调用任何处理程序。

我该如何处理？是Chrome的错误吗？

Answer 1

据我所知，当您像在代码片段中那样使用Notification API时，您根本无法处理以自定义方式单击按钮触发的事件。似乎完全可见的按钮是Chrome特定的东西，这仅是由将requireInteraction设置为true引起的。至少在Firefox和Edge中，该按钮根本不会显示。

作为一种选择，并假设您正在使用Service Worker，您还可以使用Service Worker的注册来触发通知。这样，您还可以在通知选项中使用additional attributes，例如actions，您可以在其中定义应显示的按钮列表。您可以为每个按钮定义一个action，然后在Service Worker中进行相应的操作。
以下代码可以正常运行，并在Chrome 73上进行了测试。请注意browser compatibility。

我希望有帮助。

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);