Safari 和 Service Worker 推送通知打开窗口的问题

Question

我正在向我的 React Web 应用程序添加推送通知，但我在使用 Safari 时遇到了一些问题。首先是我的 Service Worker js 文件 (sw.js) 中的单击事件侦听器：

self.addEventListener('notificationclick', (event) => {
  const data = event.notification.data;
  const url = data.url || 'http://localhost:3356';

  console.log({ data, url });

  event.notification.close();

  event.waitUntil(
    self.clients
      .matchAll({
        type: 'window',
        includeUncontrolled: true,
      })
      .then((clientList) => {
        console.log('total clients: ', clientList.length);
        for (const client of clientList) {
          console.log({ clientUrl: client.url });
          if (client.url === url + '/' && 'focus' in client)
            return client.focus();
        }
        if (self.clients.openWindow) {
          console.log('Opening a new window', url);
          return self.clients.openWindow(url);
        }
        console.log('No clients to focus');
        return;
      })
      .catch((error) => console.log({ error }))
  );

这在很大程度上运行良好，特别是在 Chrome 中。然而，我在 Safari 中遇到的问题是，如果当我单击通知时 Web 应用程序未在任何窗口和/或选项卡中打开，则 Safari 不会打开 Web 应用程序，我将被带到最后一个活动选项卡/窗口。如果我打开了多个选项卡，并且其中一个选项卡是 WebApp，则 Safari 会切换并聚焦到正确的选项卡。但似乎clients.openWindow 不起作用。日志消息“打开新窗口”确实显示，并且没有错误日志显示。

任何帮助将不胜感激。谢谢

Answer 1

更新一下，似乎 Safari 在单击通知时未打开新窗口的问题是由于我处于开发模式并使用 localhost 造成的。 当我发布生产版本并测试通知时，Safari 在单击通知后确实打开了一个新窗口。

干杯。