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

Question

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

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

Answer 1

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

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

将其从评论中移除：

缓存存储 API 在 Chrome 的最新版本中也公开为 window.caches，因此您可以从受控页面中的 DevTools 执行该代码，而无需转到服务工作者开发工具。它还在 DevTools 的“资源”选项卡中以可视方式公开：twitter。com/jeffposnick/status/546494702842028032 – Jeff Posnick 2015 年 9 月 2 日在 17:51

感谢 Jeff P.

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

How can I access the resources saved in the cache by a ServiceWorker?

javascript

service-worker