Service Worker中fetch事件处理器内postMessage的调用时机问题

首先，先还原你的代码示例，方便梳理场景：

客户端代码（main.js） #

navigator.serviceWorker.register("./service-worker.js");
console.log("client: addEventListener message");
navigator.serviceWorker.addEventListener("message", event => {
  console.log("client: message received", event.data);
});

<script src="main.js"></script>

Service Worker代码（service-worker.js） #

self.addEventListener("fetch", event => {
  console.log("service worker: fetch event");
  event.waitUntil(
    (async () => {
      const clientId = event.resultingClientId !== "" ? event.resultingClientId : event.clientId;
      const client = await self.clients.get(clientId);
      console.log("service worker: postMessage");
      client.postMessage("test");
    })()
  );
});

为什么你的示例里监听器能收到消息？ #

你关于postMessage异步调度的猜测是对的，但这里还有一个关键细节：Service Worker里的异步操作给了客户端足够的时间注册监听器。

页面加载时，main.js是同步执行的：先注册SW，紧接着就完成了message事件监听器的注册。而SW触发fetch事件后，你用event.waitUntil包裹了一个异步函数，其中await self.clients.get(clientId)是一个需要耗时的异步操作——在这段时间里，客户端的main.js已经完成了监听器的注册，所以当SW最终调用client.postMessage("test")时，客户端已经准备好接收消息了。

但要注意：这种“刚好赶上”的情况是不可靠的，完全依赖于异步操作的耗时和客户端JS的执行速度，属于巧合的时序，不能作为生产环境的依赖。

如何避免竞态条件，保证消息能被接收？ #

要确保客户端不会错过SW发送的消息，核心思路是让客户端主动告知SW自己“已就绪”，SW在收到这个信号后再发送消息。这样就能彻底消除时序问题，具体可以这么做：

方案1：客户端就绪后主动通知SW

修改客户端代码，在监听器注册完成后，主动给SW发消息：

// main.js
navigator.serviceWorker.register("./service-worker.js")
  .then(registration => {
    // 先注册消息监听器
    navigator.serviceWorker.addEventListener("message", event => {
      console.log("client: message received", event.data);
    });
    // 告知SW客户端已准备好接收消息
    registration.active.postMessage({ type: "CLIENT_READY" });
  });

然后修改SW代码，缓存需要发送的消息，等收到客户端的就绪信号再发送：

// service-worker.js
// 缓存需要发送的消息
let pendingMessage = null;

self.addEventListener("fetch", event => {
  console.log("service worker: fetch event");
  event.waitUntil(
    (async () => {
      const clientId = event.resultingClientId !== "" ? event.resultingClientId : event.clientId;
      // 先缓存消息和目标客户端ID
      pendingMessage = { clientId, message: "test" };
    })()
  );
});

// 监听客户端的就绪消息
self.addEventListener("message", event => {
  if (event.data.type === "CLIENT_READY" && pendingMessage) {
    // 给目标客户端发送缓存的消息
    self.clients.get(pendingMessage.clientId)
      .then(client => {
        if (client) {
          client.postMessage(pendingMessage.message);
          pendingMessage = null;
        }
      });
  }
});

方案2：结合页面加载事件确保监听器提前注册

如果你的客户端JS执行确实偏晚，可以把监听器注册放在页面加载完成的事件里，确保页面资源和脚本都准备完毕：

// main.js
window.addEventListener("DOMContentLoaded", async () => {
  const registration = await navigator.serviceWorker.register("./service-worker.js");
  // 注册监听器
  navigator.serviceWorker.addEventListener("message", event => {
    console.log("client: message received", event.data);
  });
  // 告知SW客户端就绪
  registration.active.postMessage({ type: "CLIENT_READY" });
});

关键结论 #

• 你观察到的postMessage异步调度逻辑是正确的：调用postMessage后，当前执行栈会先执行完毕，再派发MessageEvent，但这只能保证同一执行上下文内的代码先跑完，无法跨SW和客户端保证时序。
• 绝对不能依赖SW中异步操作的耗时来等待客户端注册监听器，这是不稳定的，在复杂页面或慢网络环境下很容易出错。
• 最可靠的方式是客户端先告知SW自己已准备好接收消息，SW再发送内容，彻底避免竞态条件。

内容的提问来源于stack exchange，提问作者Oliver Joseph Ash