PWA 通知如何重定向到已安装的应用程序（如果存在）

Question

这似乎相当基本，但我在这里找不到答案。

MDN 官方文档显示，获取导航回应用程序的通知应如下所示：

self.addEventListener("notificationclick", (event) => {
    event.notification.close();
  
    event.waitUntil(
      clients
        .matchAll({
          type: "navigate",
        })
        .then((clientList) => {
          for (const client of clientList) {
            if (client.url === "/" && "focus" in client) return client.focus();
          }
          if (clients.openWindow) return clients.openWindow("/");
        }),
    );
  });

它在浏览器中运行良好，但如果我将网站安装为 PWA，它只会重定向到浏览器中打开的网站（如果存在）或其他情况下的空白页面。

有什么方法可以获取通知以重定向到其“来源”，或者理想情况下重定向到已安装的 PWA。

注意：我不清楚此示例中的 Web Worker 是否与已安装的 PWA 一起在隔离环境中运行，或者仍在主浏览器环境中运行 - 这似乎与其客户端列表相关。

Answer 1

问题在于您的代码无法区分 PWA 和浏览器实例。您应该修改事件监听器来检查 PWA 是否已安装并优先打开它：

self.addEventListener("notificationclick", (event) => {
    event.notification.close();
    event.waitUntil(
        clients.matchAll({ type: "window" }).then(clientList => {
            for (const client of clientList) {
                if ('focus' in client) return client.focus();
            }
            if (clients.openWindow) return clients.openWindow('/');
        })
    );
});