服务工作人员正在缓存文件，但抓取事件从未被解雇 [英] Service worker is caching files but fetch event is never fired

问题描述

我刚刚尝试实施服务工作人员以将一些JSON文件和其他资产缓存在静态网站上（在localhost chrome版本47.0.2526.73（64位）上运行）。使用cache.addAll（）我已经将我的文件添加到缓存中，并且当我在chrome中打开资源选项卡并单击缓存存储时，将列出所有文件。

我遇到的问题是我的服务工作人员在chrome：// service-worker-internals中被列为激活和正在运行，但是我无法确定工作人员是否实际拦截了请求并提供了缓存文件。我已经添加了事件监听器，甚至当我在服务工作者开发工具实例中记录事件时，它从来没有达到中断点：

  this.addEventListener（'install'，function（event）{
 event.waitUntil（
 caches.open（'v1'）。then（function（cache）{
 console。 log（cache）; 
 return cache.addAll（[
'/json/0.json'，$ b $'/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; 
 （函数（缓存）{
 cache.put（event.request，response）; 
}）; 
 return response.clone（）; 
}）。catch（function（）{
}））; 
}）; 
  

基本上，我完全按照HTML5岩石服务工作者介绍中的描述运行，但我非常确定我的资产没有从缓存中提供。我注意到，服务人员提供的资产在大小栏中的devtools的网络标签中通过来自服务人员指出。

它就好像我的代码与示例没有什么不同，但由于某种原因，它没有触及提取事件。我的代码摘要： https://gist.github.com/srhise/c2099b347f68b958884d

解决方案

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

$ b $从服务工作者（至少是静态文件）确定的服务工作者只有它所在目录的最大范围。也就是说，它不能加载文件/请求/只从下面的位置获取响应。

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

因此，如果您将服务工作人员的位置更改为Web项目的根目录，则应该触发提取事件，并且您的资产应该从缓存中加载。

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

这里将在注册服务人员一节中对此进一步说明。 https://developers.google.com/web/fundamentals/getting开始/底漆/服务人员

I have just attempted to implement service workers to cache some JSON files and other assets on a static site (running on localhost chrome Version 47.0.2526.73 (64-bit)). Using cache.addAll() I have added my files to the cache, and when I open the resources tab in chrome, and click on cache storage, all the files are listed.

The issue I am having is that my service worker is listed as "activated" and "running" in chrome://service-worker-internals however, I cannot determine if the worker is actually intercepting the requests and serving up the cached files. I have added the event listener and even when I console log the event in the service workers dev tools instance, it never hits the break point:

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() {
  }));
});

Basically I am running through things exactly as described in HTML5 rocks service workers intro, but I am pretty sure that my assets aren't being served from the cache. I've noted that assets served up from a service worker are noted as such in the network tab of devtools in the size column by indicating 'from service workers'.

It just seems as if my code is no different than the examples but it's not ever hitting the fetch event for some reason. Gist of my code: https://gist.github.com/srhise/c2099b347f68b958884d

解决方案

After looking at your gist and your question, I think your issue is with scoping.

From what I've determined with service workers(at least with static files), the service worker only has a maximum scope of the directory it is in. That is to say, it can't load files/requests/responses that are pulled from a location at or above its structure, only below.

For example, /js/service-worker.js will only be able to load files in /js/{dirName}/.

Therefore, if you change the location of your service worker to the root of your web project, the fetch event should fire and your assets should load from cache.

So something like /service-worker.js, which should be able to access the /json directory, since it is deeper than the service-worker.js file.

This is further explained here, in the "Register A service worker" section. https://developers.google.com/web/fundamentals/getting-started/primers/service-workers

这篇关于服务工作人员正在缓存文件，但抓取事件从未被解雇的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！