windowClient.url比较失效：localhost环境下无法触发client.focus()

在http://localhost环境测试NotificationClick事件的示例代码时，client.focus()方法始终不会被调用，程序一直走openWindow的逻辑；但只要移除client.url === "/"的判断条件，就能正常触发focus行为。这确实是localhost环境下client.url的格式导致的问题。

原问题代码 #

self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(
    self.clients
      .matchAll({
        type: "window",
      })
      .then((clientList) => {
        for (const client of clientList) {
          if (client.url === "/" && "focus" in client) {
            return client.focus();
          }
        }
        if (self.clients.openWindow) {
          return self.clients.openWindow("/");
        }
      }),
  );
});

问题原因 #

在localhost环境中，client.url返回的是完整的URL字符串（比如http://localhost:5173/或者http://127.0.0.1:3000/），而示例代码里用client.url === "/"做严格相等判断，自然永远匹配不上，导致跳过focus逻辑直接打开新窗口。

解决方案 #

可以通过两种方式修正路径判断逻辑，适配开发和生产环境：

1. 用URL对象提取路径名（推荐，更严谨）
   通过new URL(client.url).pathname提取纯路径部分，再和"/"比较，不管域名、端口是什么，只要路径是根路径就能匹配：

self.addEventListener("notificationclick", (event) => {
  console.log("On notification click: ", event.notification.tag);
  event.notification.close();

  event.waitUntil(
    self.clients
      .matchAll({ type: "window" })
      .then((clientList) => {
        for (const client of clientList) {
          const pathname = new URL(client.url).pathname;
          if (pathname === "/" && "focus" in client) {
            return client.focus();
          }
        }
        if (self.clients.openWindow) {
          return self.clients.openWindow("/");
        }
      }),
  );
});

2. 用字符串结尾匹配
   如果只需要判断根路径，也可以用client.url.endsWith("/")，简单直接：

// 替换判断条件
if (client.url.endsWith("/") && "focus" in client) {
  return client.focus();
}

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