Javascript ServiceWorker获取完成事件

因此，我使用serviceWorker-来检查cookie结束前的时间。Cookie过期时间根据请求设置为60分钟

我在serviceWorker上构建了两个版本的获取侦听器

此版本重置客户端上的时间计数器（通过

通道.postMessage

向其发送消息），但它会根据请求（而不是响应后）发送触发器

self.addEventListener（“获取”，事件=>{
channel.postMessage（true）；
});

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

self.addEventListener（“获取”，事件=>{
event.respondWith（（异步（）=>{
const response=等待获取（event.request）；
channel.postMessage（true）；
返回响应；
})());
});

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

---

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

虽然Chrome的DevTools网络面板可能有点混乱，但在这种情况下只进行了一次网络调用。详细解释了您看到的内容

如果在

fetch

处理程序中唯一要做的事情是调用

channel.postMessage（）

，那么我建议不要调用

event.respondWith（）

。如果在第一个处理程序之后注册了另一个

fetch

处理程序，则该处理程序将有自己的响应机会。如果没有

fetch

处理程序调用

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

---

虽然Chrome的DevTools网络面板可能有点混乱，但在这个场景中只进行了一次网络调用。详细解释了您看到的内容

如果在

fetch

处理程序中唯一要做的事情是调用

channel.postMessage（）

，那么我建议不要调用

event.respondWith（）

。如果在第一个处理程序之后注册了另一个

fetch

处理程序，则该处理程序将有自己的响应机会。如果没有

fetch

处理程序调用

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