如何删除本地主机上的服务工作者缓存答案

【问题标题】：how to delete service worker cache on localhost如何删除本地主机上的服务工作者缓存
【发布时间】：2018-02-09 06:58:58
【问题描述】：

请看下面的 service worker 代码：

var CACHE_NAME = 'my-site-cache-v18';
var urlsToCache = [
  '1.jpg',
  '2.png'
 ];

self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});


self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.filter(function(cacheName) {
        }).map(function(cacheName) {
          return caches.delete(cacheName);
        })
      );
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      }
    )
  );
});

我面临的问题是在 chrome 的检查元素中，缓存存储图正在继续增长当我看到文件资源管理器中的缓存存储时，旧文件夹没有被删除。每次我刷新页面都会创建一个新文件夹。

每次我更改“CACHE_NAME”（缓存的版本）时，这些加密文件夹都会增加。

请帮忙。我尝试了很多，但无法解决。

【问题讨论】：

标签： javascript caching service-worker service-worker-events

【解决方案1】：

您可能需要更改激活事件并尝试其他方法。

我就是这样用的：

self.addEventListener('activate', function(e) {
    console.log('[ServiceWorker] Activate');

    e.waitUntil(
        caches.keys().then(function(keyList) {
          return Promise.all(keyList.map(function(key) {
            if (key !== cacheName) {
              console.log('[ServiceWorker] Removing old cache', key);
              return caches.delete(key);
            }
          }));
        })
    );

    return self.clients.claim();
});

【讨论】：

这是否适合您。你的 chrome 浏览器版本是多少？
使用最新版本。你得到这些控制台日志了？您是否尝试过完全关闭所有标签并以全新的方式打开您的网站？有时即使调试模式设置为“重新加载时更新”，我也会遇到问题

【解决方案2】：

要使用 filter()，您在 filter() 中传递的争论函数不会返回任何内容，而您需要从该函数返回一个 cacheName 值。

 cacheNames.filter(function(cacheName) {
    //you need to return the cachename which you want to 
    //delete from the cache by specifying the conditions
    }).map(function(cacheName) {
          return caches.delete(cacheName);
    })

例如-

var staticCacheName = 'my-site-v18';
self.addEventListener('install', function(event) {
  var urlsToCache = [
    '1.jpg',
    '2.jpg'
  ];

  event.waitUntil(
  caches.open(staticCacheName).then(function(cache){
    return cache.addAll(urlsToCache);
  }))

});

self.addEventListener('activate',function(event){
  console.log('activating');
  event.waitUntil(
    caches.keys().then(function(cacheNames){
      console.log(cacheNames);
      return Promise.all( 
        cacheNames.filter(function(cacheName){
        return cacheName.startsWith('my-site') && cacheName != staticCacheName ;
        }
        ).map(function(cacheName){
          return caches.delete(cacheName);
        })
      );
    })
  );
});

【讨论】：

【解决方案3】：

每次重新加载页面时缓存使用量都会增加吗？

这可能是由于 chrome 中的错误。它已被修复，看起来它将在 v65 中消失。

https://bugs.chromium.org/p/chromium/issues/detail?id=801024

【讨论】：

你认为我的 service worker js 没有问题吗？