服务人员错误的缓存文件

Question

I put service worker on my website but something goes wrong, i only put 3 files to cache in my service-worker.js

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

but after i reload the page and inspect the network tab:

others file appear twice and each one of them loaded from service worker although i did not cache it in my service-worker.js, is it something wrong with my service-worker.js?

Answer 1

Document said it browser will compare your cached file and the file get from networks: Related Documentation

If identical, browser serving from cache. If not, browser will cache the latest file from network.

So it will always have 2 request in dev-tool as you see.