如何通过Service Worker判断链接将在当前或新标签页打开？

好问题！这确实是个有点绕的点——Service Worker 的 fetch 事件本身并没有直接给我们暴露「请求是来自当前标签还是新标签」的信息，但我们可以通过一些间接的手段来推断，下面给你几个实用的思路：

思路一：通过客户端激活状态对比判断 #

我们可以先在 Service Worker 里记录当前用户正在聚焦的标签（激活状态的客户端）ID，再对比请求发起的客户端 ID，以此区分来源：

// 维护当前激活的客户端ID
let activeClientId = null;

// 监听客户端聚焦事件，更新激活ID
self.addEventListener('clientsfocused', (event) => {
  activeClientId = event.clientId;
});

self.addEventListener('fetch', async (event) => {
  // 获取发起请求的客户端对象
  const requestingClient = await clients.get(event.clientId);
  if (!requestingClient) return;

  // 只针对页面跳转的请求（排除资源请求）
  if (event.request.destination === 'document') {
    if (requestingClient.id === activeClientId) {
      console.log('请求来自当前标签页（当前页跳转）');
    } else {
      console.log('请求来自新标签页');
    }
  }
});

注意事项 #

这个方法的小局限是：如果用户在新标签页快速切换操作，可能会出现状态更新不及时的情况，但在绝大多数日常交互场景下，判断准确率还是很高的。

思路二：结合请求URL与客户端当前URL判断 #

当用户点击链接打开新标签时，发起请求的客户端（新标签）的 URL 就是目标页面的 URL；而如果是当前标签跳转，请求发起时客户端的 URL 还是原页面的 URL（因为 fetch 事件发生在页面跳转之前）。我们可以利用这个差异来判断：

self.addEventListener('fetch', async (event) => {
  const requestingClient = await clients.get(event.clientId);
  if (!requestingClient) return;

  // 只处理页面跳转请求
  if (event.request.destination === 'document') {
    const requestUrl = new URL(event.request.url);
    // 简化对比：只比较 origin 和 pathname（忽略参数等）
    const simplifiedRequestUrl = `${requestUrl.origin}${requestUrl.pathname}`;
    const simplifiedClientUrl = `${new URL(requestingClient.url).origin}${new URL(requestingClient.url).pathname}`;

    if (simplifiedRequestUrl === simplifiedClientUrl) {
      console.log('请求来自新标签页');
    } else {
      console.log('请求来自当前标签页（当前页跳转）');
    }
  }
});

注意事项 #

这个方法只适用于页面跳转的请求，所以一定要先通过 event.request.destination === 'document' 过滤掉脚本、样式等资源请求，避免误判。

思路三：监听客户端创建事件辅助判断 #

当新标签页被创建时，Service Worker 会触发 clientcreated 事件，我们可以记录最近创建的客户端 ID，然后在 fetch 事件里对比，判断是否是新标签发起的请求：

// 记录最近创建的客户端ID
let recentlyCreatedClientId = null;

// 监听客户端创建事件
self.addEventListener('clientcreated', (event) => {
  recentlyCreatedClientId = event.clientId;
  // 1秒后清空记录，避免后续请求误判
  setTimeout(() => {
    recentlyCreatedClientId = null;
  }, 1000);
});

self.addEventListener('fetch', (event) => {
  if (event.request.destination === 'document') {
    if (event.clientId === recentlyCreatedClientId) {
      console.log('请求来自刚创建的新标签页');
    } else {
      console.log('请求来自当前标签页');
    }
  }
});

注意事项 #

这个方法对刚打开的新标签页请求判断非常准确，但要注意设置合理的超时时间（比如示例中的1秒），避免和其他后续创建的客户端混淆。

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