如何实现PWA通知点击后跳转至已安装的PWA应用？

我用MDN官方提供的通知点击跳转代码在浏览器中运行正常，但将网站安装为PWA后，点击通知要么跳转至浏览器中已打开的页面，要么打开空白页。想请教两个问题：

1. 有没有办法让通知跳转至已安装的PWA应用？
2. 示例中的Service Worker（注：原问题中提到的Web Worker实际为Service Worker）是和已安装PWA在隔离环境运行，还是在主浏览器环境？这是否会影响client-list的范围？

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的方法 #

原代码的问题在于clients.matchAll的参数设置和客户端匹配逻辑，调整后可以实现跳转至已安装的PWA：

1. 修改clients.matchAll的选项：

   • 将type从"navigate"改为"window"，因为已安装的PWA属于窗口类型客户端；
   • 添加includeUncontrolled: true，确保能获取到所有同源的客户端（包括未被当前Service Worker控制的已安装PWA实例）。

2. 优化客户端匹配逻辑：

   • 不要仅匹配client.url === "/"，因为PWA的url是完整的origin + "/"，可以通过检查client.url.startsWith(self.location.origin + "/")来匹配同源的根路径；
   • 如果找到匹配的客户端，直接调用focus()；如果没有，用clients.openWindow打开应用根路径，此时浏览器会优先唤起已安装的PWA（如果存在）。

调整后的代码如下：

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

  event.waitUntil(
    clients.matchAll({
      type: "window",
      includeUncontrolled: true
    }).then((clientList) => {
      const appOrigin = self.location.origin;
      // 寻找已打开的PWA客户端
      for (const client of clientList) {
        if (client.url.startsWith(`${appOrigin}/`) && "focus" in client) {
          return client.focus();
        }
      }
      // 没有找到则打开PWA（浏览器会优先唤起已安装的应用）
      if (clients.openWindow) {
        return clients.openWindow(`${appOrigin}/`);
      }
    })
  );
});

另外，确保你的PWA满足以下条件：

• 已正确注册Service Worker，且Service Worker的作用域覆盖应用根路径；
• 应用的manifest.json中设置了正确的start_url，且display属性为standalone或fullscreen。

关于Service Worker的环境与client-list范围 #

Service Worker运行在独立的隔离线程中，和主浏览器页面、已安装的PWA都不在同一个环境，但它可以通过clients API与同源的客户端通信：

• 默认情况下，clients.matchAll()只会返回由当前Service Worker控制的客户端；
• 当设置includeUncontrolled: true后，会返回所有同源的客户端，包括已安装的PWA（即使PWA是由同一Service Worker控制的独立实例）；
• 已安装的PWA属于独立的窗口客户端，和浏览器中的标签页客户端是分开的，所以需要通过正确的参数才能在client-list中获取到它们。

内容的提问来源于stack exchange，提问作者George