如何真正清除 PWA 中的缓存

Question

我正在尝试调试有关 PWA 的问题。我使用 Google Chrome 每天运行网络应用程序并调试这个问题（台式机和平板电脑）。

当我编辑 service-worker.js （更改缓存存储名称以获取更新）时，Web 应用程序不会重新加载从服务器获取它们的所有文件，但其中的一部分始终会被缓存，即使在缓存存储中缓存名称（只有 1，因此没有多个缓存）是正确的。如果我使用不同的设备（Mac 和 Android 平板电脑），也会出现同样的情况，所以我相信不是特定设备的浏览器问题。奇怪的是，如果我在重新加载页面时使用“清除站点数据”按钮清空缓存、cookies、indexeddb 等，则 service-worker.js 会安装缓存（具有更新的名称），但如果我进入内部在我清除缓存和站点数据之前，详细视图中有一些“缓存时间”太旧的文件。

例如，在下图中您可以看到某些文件的不同时间。考虑到我在 2020 年 12 月 6 日 19:17:50 使用了“清除站点数据”按钮。

以下是 service-worker.js 中包含“activate”事件的部分以及带有缓存名称的 const。

const name_of_cache = ['cache_v1'];
self.addEventListener('activate', event => {
console.log('Service worker activate event!');
event.waitUntil(
caches.keys().then((cacheNames) => {
  return Promise.all(
    cacheNames.map((cacheKeyName) => {
      if(name_of_cache.indexOf(cacheKeyName) === -1) {
        return caches.delete(cacheKeyName);
      }
    }
  ));
})
);
});

我哪里做错了？如何解决这个问题，每次更改 service-worker.js 和缓存名称时清除缓存和所有文件？

Answer 1

这个答案基于这个要点：https://gist.github.com/deanhume/4b7e1f136cbee288cff9f0fc46318fbb

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

这将循环遍历您拥有的每个缓存并将其删除。