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

Question

我正在尝试构建一个使用 ServiceWorker 的网页。我按照这个示例（适用于 Chrome 45+），它似乎缓存了一些数据。我尝试访问缓存的数据但没有成功。

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

Answer 1

是的，您可以看到缓存中的内容。查看您正在使用的示例存储库中的源代码，我发现它将缓存的 url 存储在名为 的缓存中CURRENT_CACHES['post-message']。如果您位于 Service Worker 中（转至chrome://serviceworker-internals/，找到相关 Service Worker，然后检查它），此代码片段将记录当前存储在该缓存中的 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。