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

【问题标题】：Why PWA Workbox doesn't always handle the same route in the same way?为什么 PWA Workbox 并不总是以相同的方式处理相同的路由？
【发布时间】：2020-04-18 09:43:58
【问题描述】：

我为我的 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") 
        })
    })());
  }
});

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

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

【问题讨论】：

标签： javascript networking frontend progressive-web-apps workbox

【解决方案1】：

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

【讨论】：

嗨，亚伯拉罕。谢谢你的通知。我不知道，现在我清楚了。