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

Question

我为我的 favicon 创建了基本的 Workbox StaleWhileRevalidate 策略，如果网络离线，它应该 return 请求的缓存值。它部分起作用。实际上它 returns 缓存值仅用于 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") 
        })
    })());
  }
});

如您所见，控制台中出现有关 Failed favicon fetch 的错误。但这怎么可能呢？ Workbox 应该捕获它，它会打印 '5555' 调试消息，并且它应该 return 所有请求的缓存图标。但它只对 2 个请求执行此操作，其他请求失败。为什么会这样？

Chrome Devtool 网络报告（网络离线）

Answer 1

这是按预期工作的。从您的客户端应用程序到服务工作者的两个请求是成功的，因为您已经缓存了资产。 Service Worker向服务器更新缓存资产的两次请求均失败，原因是网络不在线。

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

Why PWA Workbox doesn't always handle the same route in the same way?

javascript

networking

frontend

progressive-web-apps

workbox