服务工作人员获取事件处理程序中postMessage的时间

Question

我有一个简单的服务人员，在fetch上向客户发布消息：

// 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);
});

html prettyprint-override"><script src="main.js"></script>

// 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（）计划仅在所有挂起的执行上下文完成后发送MessageEvent。例如，如果在事件处理程序中调用postMessage（），则该事件处理程序将在发送MessageEvent之前运行到完成，同一事件的任何剩余处理程序也将如此。

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Notes

然而，我不确定这在这个具体的例子中意味着什么。例如，当fetch事件处理程序运行到完成时，是否保证客户端JavaScript已运行，因此将注册消息事件侦听器？

我有一个更大的应用程序正在做类似于上面的事情，但是客户端JavaScript在页面加载中稍微晚一点运行，所以我想知道什么时候必须注册事件监听器以避免竞争条件并保证消息由服务人员发布将被接收。

Answer 1

默认情况下，从页面的控制服务工作人员发送到页面的所有消息（使用Client.postMessage（））在页面加载时排队，一旦页面的超文本标记语言文档被加载和解析（即在DOMContentLoade之后），就会被分派事件火灾）。可以通过调用ServiceWorkerContainer.startMessages（）提前开始分派这些消息，例如，如果您在页面加载完成之前使用EventTarget.addEventListener（）调用了消息处理程序，但希望立即开始处理消息。

https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerContainer/startMessages