为什么服务工作者缓存所有图像？答案

【问题标题】：why service worker cache all images?为什么服务工作者缓存所有图像？
【发布时间】：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 和 javascripts（我在网络选项卡中检查了禁用缓存）下图显示了 img 文件夹中的所有图像均由 service worker 调用。

我也检查了缓存存储，如您所见，也只有两个图像和图像文件夹！！我很困惑！！如果有人可以对此提供一些澄清，那将是非常有帮助的。

【问题讨论】：

标签： service-worker

【解决方案1】：

答案稍晚一点，但是由于您正在拦截所有获取请求，因此即使没有缓存的图像也会被服务工作人员返回，因为这行：

return fetch(event.request)

(from ServiceWorker) 标签仅表示它已由 Service Worker 返回，无论是来自缓存还是网络。

【讨论】：