为什么服务人员缓存所有图像?

时间:2019-04-06 11:19:13

标签: service-worker

我只是测试服务人员的功能,以了解其工作方式。 所以现在我遇到了一个问题。

var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [    
  '/img/map.jpg', 
  '/img/chicago.jpg',  
];

self.addEventListener('install', function(event) {
    // Perform install steps
    event.waitUntil(
      caches.open(CACHE_NAME)
        .then(function(cache) {
          console.log('Opened cache');
          return cache.addAll(urlsToCache);
        })
    );
  });

  self.addEventListener('fetch', function(event) {
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          // Cache hit - return response
          if (response) {
            return response;
          }
          return fetch(event.request);
        }
      )
    );
  });

这些是我仅用于缓存两个图像但显然服务人员将所有图像以及一些CSS和javascript兑现的代码(我选中了“禁用网络标签”中的缓存) 下图显示了img文件夹中的所有图像都被服务人员调用。 enter image description here

我也检查了缓存存储,并且您可以看到也只有两个图像和图像文件夹!我很困惑!!如果有人可以提供一些澄清,那将超级有帮助。 enter image description here

1 个答案:

答案 0 :(得分:1)

答案的稍后部分,但是由于您正在拦截所有提取请求,因此由于以下原因,服务工作者甚至不会返回缓存的图像:

return fetch(event.request)

标签(from ServiceWorker)仅表示它是由服务工作者返回的,无论是从缓存还是从网络返回。