Question

我在网站上放了服务人员，但出了点问题，我只将3个文件缓存在我的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);
          }
        })
      );
    })
  );
});

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

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

Answer 1

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

如果相同，则浏览器从缓存中投放。如果没有，浏览器将从网络缓存最新文件。

因此，如您所见，它将在dev-tool中始终有2个请求。

服务人员错误的缓存文件

1 个答案: