在 Chrome 中单击浏览器通知时如何自动聚焦浏览器选项卡？

Posted 2023-03-29

【中文标题】在 Chrome 中单击浏览器通知时如何自动聚焦浏览器选项卡？

【英文标题】：How to auto focus browser tab when clicking on browser notification in Chrome?

【发布时间】：2015-11-04 02:46:20

【问题描述】：

我正在尝试为我正在处理的项目设置浏览器通知。我到目前为止的代码是：

// 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 寻找解决方案并找到了这些：

How to get focus to the tab when a desktop notification is clicked in Firefox?

How to get focus to a Chrome tab which created desktop notification?

但是建议的已接受解决方案对我不起作用 - 事件已触发但焦点未设置。

有人对如何使其正常运行有任何建议吗？

Chrome 版本：版本 44.0.2403.130 m

火狐版本：40.0

【问题讨论】：

您找到解决方案了吗？我遇到了类似的问题（与通知无关，但我仍然会丢失并且无法重新获得键盘焦点到选项卡）。

@QuinxyvonBsiex 不，我没有。如果你找到它，请在这里回答...

我在这里发布了一个更新的答案***.com/a/40964355/714733@Marko

而不是 window.focus();使用父焦点（）； .它在 Chrome 和 Firefox 中对我有用。

【参考方案1】：

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

在客户端页面中：

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

在服务工作者中：

self.addEventListener('notificationclick', event => 
  event.notification.close();

  event.waitUntil(
    clients.matchAll(
      type: "window",
    )
    .then(clientList => 
      if (clientList.length) 
        clientList[0].focus();
      
    )
  );
);