在ServiceWorker中获取缓存的对象 - 失败

Question

当我尝试通过检查开发工具中的离线按钮来获取缓存时。它没有得到互联网连接错误，我尝试关闭我的wifi获取缓存数据。

Answer 1

离线按钮

Offline签入Chrome检查工具可以完全模拟离线网络状态，因此您在使用时无需关闭调制解调器，wifi或网络适配器。

观察响应来源

你可以去Chrome检查＆gt;网络面板并查看size列以检查响应的来源。只需查看那里，您就可以通过浏览器缓存，服务工作者或网络来处理请求。

错误

如果您在离线时因sw.js而收到错误，则不会出现问题。它只是意味着它无法从网络中获得服务工作者，而且无论如何它都不必在你离线时获取它。 See this answer有关它的更详细信息。

Answer 2

我建议你为chrome安装Lighthouse扩展，它使测试更容易，报告非常有用。 你在检查缓存文件的'fetch'事件吗？你确定你有缓存的文件吗？

self.addEventListener('fetch', function(event) {
  console.log(event.request.url);
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});