为什么服务工作者缓存所有映像？

Question

我只是在测试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);
        }
      )
    );
  });

Answer 1

回答稍晚一点，但由于您正在拦截所有的获取请求，因此服务工作者甚至不会返回缓存的图像，原因如下：

return fetch(event.request)

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