删除浏览器服务工作者缓存文件 window.caches 后的白屏

如何解决删除浏览器服务工作者缓存文件 window.caches 后的白屏

我正在使用 caches API 在特定情况下删除缓存文件。

if (<version_from_backend> !== process.env.REACT_APP_VERSION) {
  if (window.caches && caches) {
    
    // Service worker cache should be cleared with caches.delete()
    caches.keys().then((names) => {
      for (const name of names) {
        caches.delete(name);
      }
    });

    window.location.reload();
  }
}

这完全没问题并且工作正常，但是在删除缓存后 客户端看到一个没有内容的白页，因为浏览器正在尝试再次获取文件

我需要一个解决方案来避免白页

我想到的一件事是排除 index.html 被删除并在其中显示加载微调器，但我不知道该怎么做:(

我们可以获取 caches.keys() 并找到特定文件吗？

---

1. 我在角度和反应方面都遇到了这个问题
2. 服务工作线程被激活，它是一个 PWA
3. 清除缓存的主要目的是让用户可以使用最近添加的功能
4. window.reload(true) 对我不起作用，它说它已被弃用