ServiceWorker 获取完成事件

Question

原因，我正在使用 serviceWorker - 是检查 cookie 结束前的时间。根据要求将 Cookie 有效期设置为 60 分钟。

我在 serviceWorker 上构建了 2 个版本的 fetch 监听器

此版本在客户端上重置时间计数器（通过 channel.postMessage 向其发送消息。但它会根据请求发送触发器（而不是在响应后）。

self.addEventListener( "fetch", event => {
    channel.postMessage(true);
});

第二个版本创建新的 fetch 调用，获取响应，触发客户端，然后 returns 响应。

self.addEventListener( "fetch", event => {
    event.respondWith((async () => {
        const response = await fetch(event.request);
        channel.postMessage(true);
        return response;
    })());
});

在这种情况下 - 第二种选择在时间上会更准确。但是如果查看开发人员工具中的网络选项卡，这会创建那些重复的网络请求

是否有可能让 fetch 做它的事情，让它完成，并在不创建新的 fetch 调用的情况下获得响应？我对用于缓存的任何类型的 serviceWorker 都不感兴趣（示例中 100% 的获取事件用例用于缓存...）

Answer 1

虽然 Chrome 的 DevTools 网络面板可能有点令人困惑，并且暗示并非如此，但在这种情况下只会进行一次网络调用。更详细地解释了您所看到的内容。

如果您在 fetch 处理程序中只想调用 channel.postMessage()，那么我建议您不要调用 event.respondWith()。如果您在第一个处理程序之后注册了另一个 fetch 处理程序，则该处理程序将有自己的响应机会。如果 fetch 处理程序中的 none 调用 event.respondWith()，那么从网络角度来看，这实际上是一个空操作。

self.addEventListener('fetch', (event) => {
  // Optional: you might want to check for some criteria
  // before calling channel.postMessage().
  if (event.request.url === '...') {
    channel.postMessage(true);
  }
});

ServiceWorker 获取完成事件

ServiceWorker fetch-complete event

javascript

fetch

service-worker