javascript - 如何真正清除 PWA 中的缓存

Question

我正在尝试调试有关 PWA 的问题。我使用谷歌浏览器每天运行 web 应用程序并调试这个问题（台式机和平板电脑）。

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

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

以下是带有“激活”事件的 service-worker.js 和带有缓存名称的 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 和缓存名称时清除缓存和所有文件？

标签： javascriptprogressive-web-appsservice-worker

Answer 1

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

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

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