React js服务工作者缓存问题

Question

我们在reactjs应用程序中安装了离线插件，该应用程序使用service worker缓存构建文件，未检查新构建的任何更新，因此，具有旧构建的用户仍在使用service worker中的缓存数据访问旧站点。这些文件没有过期设置，所以我想知道是否有任何解决方案可以强制用户刷新页面或将更新推给用户？

我在新版本中进行了更新，没有缓存头，离线插件自动更新，但我仍然无法找到将此更新推送到旧用户文件的方法

Answer 1

我不熟悉脱机插件，但我确实有一个解决方案。

浏览器每次加载应用程序时都会获取ServiceWorker文件。

如果获取的ServiceWorker文件与以前的文件不同，它将基本上用新文件替换旧文件（但此过程稍微复杂一点，并且不会在新ServiceWorker的初始加载时发生[更新过程的描述可在此处找到]）。

因此，基本上您可以做的是更改ServiceWorker文件，并向其添加代码，以删除激活时的旧缓存。像这样：

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

您可以在此处找到有关ServiceWorker的更多信息。