如何将基于 Reactjs 的 PWA 更新到新版本?

IT技术 javascript reactjs progressive-web-apps
2021-05-17 07:19:00

我正在开发一个基于 reactjs 的应用程序。我也service-worker对它进行了设置。之后add to home screen,应用程序从不检查服务器是否有新的更新。

我也试过:

window.location.reload(true);

但它不会更新新版本。

我正在使用Apache服务器来提供build文件夹和更新我正在获取我的项目的新版本并在Apache服务器上提供服务。

2个回答

两天后我终于解决了我的问题。问题出在service-worker文件中。如果页面重新加载并且服务器文件发生更改,我必须添加事件侦听器,以便更新文件。

所以我serviceWorker.jsregister函数中添加了这个部分

window.addEventListener('activate', function(event) {
      event.waitUntil(
          caches.keys().then(function(cacheNames) {
              return Promise.all(
                  cacheNames.filter(function(cacheName) {
                      // Return true if you want to remove this cache,
                      // but remember that caches are shared across
                      // the whole origin
                  }).map(function(cacheName) {
                      return caches.delete(cacheName);
                  })
              );
          })
      );
    });

只是不要忘记。重新加载页面时调用此侦听器。所以我制作 API 服务来检查是否有新版本。如果有新版本,它必须重新加载页面以获取新文件。

这个问题很有帮助:如何清除服务工作者的缓存?

更新(2019 年 12 月 1 日):

我找到了更新新 PWA 的更好方法。实际上这种方式(以上)不适用于 iOS 13。所以我决定通过 API 检查更新。PWA 将当前版本发送到 API,如果有新版本发布,在 PWA 中我们应该删除所有缓存:

caches.keys().then(function(names) {
    for (let name of names)
        caches.delete(name);
});

然后重新加载应用程序:

window.location.href = "./";

重新加载后,因为离线模式下没有缓存加载页面,所以 PWA 会检查服务器并获取新版本。

这对我有用: src/index.tsx

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register({
  onUpdate: (e) => {
    const { waiting: { postMessage = null } = {} as any, update } = e || {};
    if (postMessage) {
      postMessage({ type: 'SKIP_WAITING' });
    }
    update().then(() => {
      window.location.reload();
    });
  },
});