javascript - Service Worker 正在缓存文件，但从未触发 fetch 事件

Question

我刚刚尝试实现服务 worker 以在静态站点上缓存一些 JSON 文件和其他 Assets (在 localhost chrome 版本 47.0.2526.73(64 位)上运行)。使用 cache.addAll() 我已将文件添加到缓存中，当我在 chrome 中打开资源选项卡并单击缓存存储时，会列出所有文件。

我遇到的问题是，我的服务 worker 在 chrome://service-worker-internals 中被列为“已激活”和“正在运行”，但是，我无法确定该 worker 是否真的在拦截请求并提供缓存文件。我已经添加了事件监听器，即使我在服务 worker 开发工具实例中控制台记录事件，它也永远不会达到断点:

this.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      console.log(cache);
      return cache.addAll([
        '/json/0.json',
        '/json/1.json',
        '/json/3.json',
        '/json/4.json',
        '/json/5.json',
      ]);
    })
  );
});

this.addEventListener('fetch', function(event) {
  console.log(event);
  var response;
  event.respondWith(caches.match(event.request).catch(function() {
    return fetch(event.request);
  }).then(function(r) {
    response = r;
    caches.open('v1').then(function(cache) {
      cache.put(event.request, response);
    });
    return response.clone();
  }).catch(function() {
  }));
});

基本上，我正在按照 HTML5 rocks service worker 介绍中的描述运行所有内容，但我很确定我的 Assets 不是从缓存中获取的。我注意到，通过指示“来自服务 worker ”，服务 worker 提供的 Assets 在大小列中的 devtools 网络选项卡中被注明。

我的代码似乎与示例没有什么不同，但由于某种原因它从未触发过获取事件。我的代码要点:https://gist.github.com/srhise/c2099b347f68b958884d

Answer 1

在查看了您的要点和问题之后，我认为您的问题与范围界定有关。

根据我对 service worker 的判断(至少是静态文件)，service worker 只有它所在目录的最大范围。也就是说，它不能加载文件/请求/响应从其结构或上方的位置拉出，仅在下方。

例如，/js/service-worker.js 将只能加载/js/{dirName}/中的文件。

因此，如果您将 Service Worker 的位置更改为您的 Web 项目的根目录，则应该触发 fetch 事件并且您的 Assets 应该从缓存中加载。

所以像/service-worker.js 这样的东西，它应该能够访问/json 目录，因为它比 service-worker.js 文件更深。

这在“注册服务 worker ”部分中有进一步解释。 https://developers.google.com/web/fundamentals/getting-started/primers/service-workers