Question

我正在尝试构建一个使用ServiceWorker的网页。我跟着this example（对于Chrome 45+），这似乎缓存了一些数据。我试图访问缓存的数据但没有成功。

是否可以通过Chrome控制台找到缓存的数据（与本地存储类似）？是否有任何简单的JS代码可以从控制台运行来获取它？

Answer 1

是的，您可以看到缓存中的内容。查看您正在使用的示例存储库中的源代码，我发现它将缓存的URL存储在名为CURRENT_CACHES['post-message']的缓存中。如果你在服务工作者（转到chrome://serviceworker-internals/，找到相关的服务工作者并检查它），这段代码将记录当前存储在该缓存中的URL：

caches.open(CURRENT_CACHES['post-message']).then(function(cache) {
  cache.keys().then(function(requests) {
    var urls = requests.map(function(request) {
      return request.url;
    });
    console.log(urls.sort());
  });
});

基本上你只是打开缓存，在其上调用keys()，并记录返回的每个密钥（或缓存记录）的URL。

Answer 2

提升评论：

在最新版本的Chrome中，Cache Storage API也作为window.caches公开，因此您可以在受控页面中从DevTools执行该代码，而无需转到服务工作者DevTools。它也在DevTools＆＃39;中直观地暴露出来。资源选项卡：twitter.com/jeffposnick/status/546494702842028032 - Jeff Posnick Sep 2＆15; 15 17:51

感谢Jeff P。

如何通过ServiceWorker访问缓存中保存的资源？

2 个答案: