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

Question

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

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

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

如何在域下导航时停止 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 不会自动将项目添加到缓存中。您实际上是使用 Cache.put() 将项目手动添加到缓存中fetch 处理程序中的方法。

你应该使用的是 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;
        });
    })
);