如何自动聚焦浏览器选项卡时，点击浏览器通知在Chrome

Question

我正在尝试为我正在研究的项目设置浏览器通知。到目前为止我的代码是:

// Notification permissions logic handled before...
var notification = new Notification('Title', { body: 'Message' });
notification.onclick = function (e) {
    window.focus();
    // this.cancel();
};
setTimeout(notification.close.bind(notification), 5000);

通知在这段代码中工作得很好，除了一件事。在Chrome中，单击通知不会将焦点设置在浏览器窗口上。在Firefox中，这种行为是开箱即用的，没有上面定义的点击处理程序也能正常工作。我已经为Chrome寻找了解决方案，发现了这些:

如何在Firefox中单击桌面通知时将焦点放在选项卡上?

如何将焦点放在创建桌面通知的Chrome选项卡上?

然而，建议接受的解决方案对我不起作用-事件被触发，但焦点没有设置。

有没有人有任何建议如何使这个行为正确?

Chrome版本:version 44.0.2403.130 m

Firefox版本:40.0

Answer 1

这是一个粗糙的解决方案，但如果你注册了一个service worker，你可以这样做。

客户端页面:

yourServiceWorkerRegistration.showNotification('Title', {
  body: 'Message',
});

service worker中:

self.addEventListener('notificationclick', event => {
  event.notification.close();
  event.waitUntil(
    clients.matchAll({
      type: "window",
    })
    .then(clientList => {
      if (clientList.length) {
        clientList[0].focus();
      }
    })
  );
});

Answer 2

现在，我的chrome版本是100.0.4896.127。window.focus()在通知回调的onclick中工作完美!这对任何看到这个问题的人都有帮助。