为什么PWA Workbox并不总是以相同的方式处理相同的路由？

Question

我为我的favicon创建了基本的Workbox StaleWhileRevalidate策略，如果网络处于脱机状态，它应该在请求中返回缓存的值。它部分起作用。实际上，它仅返回2个请求的缓存值，而其他请求失败。在控制台中，我们可以看到有关未处理的异常和无法提取的错误。我想知道这怎么可能？

服务工作者处理程序。

self.addEventListener('fetch', (event) => {
console.log(5555); // basically works every time
  if (event.request.url.indexOf('favicon.ico') !== -1) {
    event.respondWith((async () => {
      // Configure the strategy in advance.
      const strategy = new workbox.strategies.StaleWhileRevalidate({cacheName: 'favicon-cache-v1'});


      // Make two requests using the strategy.
      // Because we're passing in event, event.waitUntil() will be called automatically.

      return strategy.handle({event, request: event.request.url})
        .catch(() => {
           // it's never happens somehow (propably because it's always fetch from cache, but I'm not sure
          console.log("WHOOOPSS, CATCH") 
        })
    })());
  }
});

如您所见，控制台中出现有关失败的收藏图标获取错误。但是怎么可能呢？Workbox应该捕获它，并输出'5555'调试消息，并且应该为所有请求返回缓存的图标。但是它仅对2个请求执行此操作，其他请求均失败。为什么会发生？

[Chrome Devtool网络报告（网络处于离线状态）

Answer 1

这正在按预期方式工作。从客户端应用程序到服务工作者的两个请求成功，因为您已经缓存了资产。由于网络处于脱机状态，因此从服务工作者向服务器更新缓存资产的两个请求均失败。