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

Question

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

是否可以通过 Chrome 控制台找到缓存的数据(类似于 Local Storage)？ 我可以从控制台运行任何简单的 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。