如何以编程方式清除服务工作者缓存？

Question

我有一个带有多个缓存的服务工作者的站点，这些缓存具有用于不同原因的文件。 我将能够按需从我的程序中清除（或删除）一个特定的缓存，而不是从服务工作者本身内部。 这是我尝试过的：

async function clearCache(cacheName) {
  if ('caches' in window) {
    return await caches.delete(cacheName);
  } 
}

我可以从窗口对象中获取缓存，但似乎无法删除它。 我也尝试过遍历缓存并单独删除所有文件，但这也不起作用。

这可能吗？

Answer 1

是的，该代码应该删除缓存。 （你可以通过省略async/await来简化它，因为代码已经返回了一个承诺，但这并不重要。）

如果您没有看到缓存立即消失，那么范围内可能有一个不同的变量正在维护对缓存的打开实例的引用。 根据规范：

注意：在这一步之后，现有的 DOM 对象（即当前引用的 Cache、Request 和 Response 对象）应该保持功能。

在实践中，这意味着如果您在某个范围内有一个cacheName的打开实例，则删除将在它关闭或超出范围之后才会发生。

Answer 2

这对我有用，可以以编程方式从缓存中清除所有内容。

if ('serviceWorker' in navigator) {
  caches.keys().then(function(cacheNames) {
    cacheNames.forEach(function(cacheName) {
      caches.delete(cacheName);
    });
  });
}