如何在域下导航时停止添加未在 Service Worker 中声明的内容

Question

我有一些服务工作人员按预期工作，主要是按照指示获取、缓存和请求内容。

但是我注意到，除了在服务工作线程中声明的指定内容之外，比如 files/folders，在域中导航时，未声明的内容被添加到缓存中。

顺便说一下，这是个问题，它会使缓存膨胀 space，而且通常我不希望它被缓存。

如何在域下导航时停止 Service Worker 内容添加未声明的内容？

这里是这个SW的安装代码，负责添加内容

// Declaring cache name, version, files to be cached.
 self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
  e.waitUntil(
     caches.open(CACHE_NAME).then(function(cache) {
          console.log('[ServiceWorker] DTL Install Caching App Shell');
          return Promise.all([cache.addAll(FILES_TO_CACHE)]);
      }).then(function() {
          //skiWaiting, forza instalacion de SW.
          return self.skipWaiting();
      })
  );
 });

并且在导航到域的其他文件夹时，但未在要缓存的内容数组中声明，像往常一样触发获取事件，代码是这样的：

self.addEventListener('fetch', function(event) {
 console.log('SW DTL fetch');                                                                                                                                                              
  event.respondWith(
     caches.open(CACHE_NAME).then(function(cache) {
         return fetch(event.request).then(function(response) {
             cache.put(event.request, response.clone());
             return response;
         });
      })
  );      
});

Answer 1

您不必阻止任何事情，因为默认情况下 Service Worker 不会自动将项目添加到缓存中。您实际上是在 fetch 处理程序中使用 Cache.put() 方法手动将项目添加到缓存。

您应该使用的是 Cache.match()；

event.respondWith(
    caches.match(event.request).then(function (response) {
        // return the response if it is found in cache
        if (response) return response;

        // fall back to network as usual otherwise
        console.log('SW: No response found in cache. About to fetch from network...');
        return fetch(event.request).then(function (response) {
            return response;
        });
    })
);

如何在域下导航时停止添加未在 Service Worker 中声明的内容

How to stop the addition of content not declared in Service Worker, while navigating under a domain

javascript

caching

service-worker

progressive-web-apps