使用 service worker 的焦点选项卡和更改页面答案

【问题标题】：Focus tab and change page with service worker使用 service worker 的焦点选项卡和更改页面
【发布时间】：2023-01-31 22:28:57
【问题描述】：

我们需要 service worker 的一点帮助。我们要做的是点击通知，执行 service worker 代码并检查站点是否在选项卡中打开：如果站点未打开，我们想打开一个新选项卡并导航到预定义的 url ，如果它被打开，我们要聚焦选项卡，然后导航到站点的预定义路径。

我们尝试了下面的代码，但它不起作用，因为我们收到一些错误，例如“服务人员不是活动人员”等。

非常感谢任何帮助

谢谢

event.waitUntil(clients.matchAll({type: 'window' }).then(function (clientList) {

      let openNewWindow = true;
      for (let i = 0; i < clientList.length; i++) {
        const client = clientList[i];
        if (client.url.includes('localhost') && 'focus' in client) {
          openNewWindow = false;
          client.focus()
                 .then(function (client2)
                 { return client.navigate(openUrl)});
         // });
        }
      }
      if (openNewWindow) {
        return clients.openWindow(openUrl);
      }

    }));

【问题讨论】：

标签： focus service-worker navigateurl

【解决方案1】：

我不知道你是否还需要解决方案，但我们是这样做的。
点击后，我们通过lookup寻找正确的注册。因为我们的解决方案有很多不同的客户，并且可以有多个注册。当我们找到它时，我们会发送一条消息。在其他地方，我们有一个监听这些消息的人来处理 Angular 应用程序的循环。

如果没有打开标签，我们使用winClients.openWindow(url)

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

const handleClick = async (event) => {
  const data = event.notification.data
  const winClients = clients;
  const action = event.action;
  event.notification.close();
  event.waitUntil(
    clients.matchAll({includeUncontrolled: true, type: 'window'}).then(clients => {
      let found = false;
      let url = data.fallback_url;

      if (action === 'settings') {
        url = data.actions.settings;
      }

      clients.every(client => {
        if (client.url.includes(data.lookup)) {
          found = true;
          client.focus(); 
          client.postMessage({action: 'NOTIFICATION_CLICK', message_id: data.message_id, navigate_url: url});
          return false;
        }
        return true;
      });

      if (!found) {
        winClients.openWindow(url);
      }
    })
  );
};

【讨论】：