React-js服务工作者缓存问题

时间:2019-02-09 13:28:06

标签: reactjs service-worker

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

我已经使用不具有缓存头的新版本进行了更新,并为脱机插件进行了自动更新,但是我仍然找不到将这种更新推送到旧文件用户的方法

1 个答案:

答案 0 :(得分:0)

我对offline-plugin不熟悉,但是我确实有一个解决方案。

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

如果所获取的ServiceWorker文件与以前的文件不同,则它将基本上用新文件替换旧文件(但是此过程有点复杂,并且不会在新ServiceWorker的初始加载时发生) [Description of the update process can be found here]

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

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

您可以找到further information on ServiceWorkers here