如何在客户端获取特定窗口的Service Worker clientId？

1. 客户端主动获取自身 clientId #

不需要依赖fetch事件，你可以在客户端页面加载完成后，向Service Worker发送消息，SW能通过event.source.id直接拿到发送消息的客户端ID，再回传给客户端。这种方式能精准绑定当前窗口，不会出现多客户端混淆的问题。

客户端代码：

// 客户端页面逻辑
navigator.serviceWorker.ready.then(async (registration) => {
  // 请求SW返回当前客户端ID
  const clientId = await new Promise((resolve) => {
    const msgChannel = new MessageChannel();
    msgChannel.port1.onmessage = (event) => {
      if (event.data.type === 'CLIENT_ID') {
        resolve(event.data.id);
      }
    };
    registration.active.postMessage(
      { action: 'getClientId' },
      [msgChannel.port2]
    );
  });

  // 保存ID，后续发请求时携带
  console.log('当前窗口clientId:', clientId);
  
  // 示例：携带clientId向SW发请求，要求专属回复
  registration.active.postMessage({
    action: 'handleRequest',
    targetClientId: clientId
  });
});

Service Worker代码：

// Service Worker逻辑
self.addEventListener('message', (event) => {
  if (event.data.action === 'getClientId') {
    // event.source就是发送消息的客户端实例，直接取ID
    event.ports[0].postMessage({
      type: 'CLIENT_ID',
      id: event.source.id
    });
  } else if (event.data.action === 'handleRequest') {
    // 根据传入的clientId找到目标客户端，发送回复
    self.clients.get(event.data.targetClientId).then((client) => {
      if (client) {
        client.postMessage({
          type: 'RESPONSE',
          content: '这是给你这个窗口的专属回复'
        });
      }
    });
  }
});

2. SW主动推送客户端ID #

当客户端被SW控制时，SW可以通过controllerchange事件主动向客户端发送其clientId，无需客户端主动请求：

SW代码：

self.addEventListener('activate', (event) => {
  event.waitUntil(self.clients.claim()); // 确保接管所有客户端
});

self.addEventListener('controllerchange', (event) => {
  // 找到当前被控制的窗口客户端，发送ID
  self.clients.matchAll({ type: 'window', includeUncontrolled: false }).then((clients) => {
    clients.forEach(client => {
      client.postMessage({
        type: 'ASSIGN_ID',
        clientId: client.id
      });
    });
  });
});

客户端代码：

// 监听SW发来的ID
navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'ASSIGN_ID') {
    const clientId = event.data.clientId;
    // 保存ID备用
    console.log('SW分配的客户端ID:', clientId);
  }
});

为什么fetch事件的方法不可靠？ #

fetchEvent.clientId仅对应发起当前请求的客户端，但如果多个客户端同时发起请求，SW的事件队列可能会导致ID匹配混乱；如果请求被缓存或由其他客户端触发，拿到的ID也会偏离目标窗口。而message事件的event.source.id是直接绑定到发送消息的客户端实例，完全不会出现混淆问题。

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