服务人员错误的缓存文件答案

【问题标题】：service worker wrong caching file服务人员错误的缓存文件
【发布时间】：2020-03-14 11:29:56
【问题描述】：

我将 service worker 放到我的网站上，但出现了问题，我只在我的 service-worker.js 中缓存了 3 个文件

const CACHE_NAME = "firstpwav1";
var urlsToCache = [
 "http://localhost/dev/assets/js/jquery/jquery.min.js",
 "http://localhost/dev/assets/images/my-logo.png",
 "http://localhost/dev/assets/images/loader.gif"
 ];

self.addEventListener("install", function(event) {
 event.waitUntil(
   caches.open(CACHE_NAME).then(function(cache) {
     return cache.addAll(urlsToCache);
   })
     );
   });

    self.addEventListener("fetch", function(event) {
     event.respondWith(
       caches
         .match(event.request, { cacheName: CACHE_NAME })
      .then(function(response) {
        if (response) {
          console.log("ServiceWorker: Using cache from: ", response.url);
          return response;
        }

        console.log(
          // "ServiceWorker: Load from server",
          // event.request.url
        );
        return fetch(event.request);
      })
  );
});


self.addEventListener("activate", function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheName != CACHE_NAME) {
            console.log("ServiceWorker: cache " + cacheName + " deleted");
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

但在我重新加载页面并检查网络选项卡后：

其他文件出现两次，每个文件都从服务工作者加载，尽管我没有将它缓存在我的 service-worker.js 中，我的 service-worker.js 有问题吗？

【问题讨论】：

标签： javascript google-chrome-devtools service-worker

【解决方案1】：

文档说浏览器会比较你的缓存文件和从网络获取的文件：Related Documentation

如果相同，则浏览器从缓存中提供服务。如果没有，浏览器将缓存来自网络的最新文件。

因此，如您所见，它在开发工具中总是有 2 个请求。

【讨论】：