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，但如果用户单击“关闭”又称“Закрыть”按钮，则不会调用任何处理程序。

我该怎么处理？这是铬的错误吗？

Answer 1

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

作为替代方案并假设您正在使用服务工作者，您还可以使用服务工作者的注册来触发通知。通过这个你也可以在通知的选项中使用additional attributes，比如actions，你可以在其中定义应该显示的按钮列表。您可以为每个按钮定义action，并在服务工作者中相应地执行操作。 以下代码可以使用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);