更新 PWA 应用程序（反应）

Question

我有一个使用 create-react-app 创建的 PWA 应用程序。

如何更新我的 PWA 应用程序以获取服务器上的最新更改，而不是从其缓存中获取？

我正在使用 React 版本 +17 并使用 serviceWorker 使用此 CRA 创建 PWA 应用程序。

Answer 1

您可以通过卸载并重新安装它们来更新已安装的 PWA 应用程序以获得最新的更改。

但是，如果您熟悉 CRA 应用程序中的 ServiceWorker，则可以轻松地扩展您的 Service Worker，以根据每次加载或任何手动条件更新您的应用程序。

打开你的 service worker 注册文件并在上面找到 registerValidSW 函数。添加此行：

function registerValidSW(swUrl, config) {
  navigator.serviceWorker
    .register(swUrl)
    .then((registration) => {

      registration.update();        // <--------------- add this line ----

      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        if (installingWorker == null) {
          return;
        }
      }
    })
}

您可以添加一个时间间隔来定期更新您的应用程序。

      // to update application on startup load
      registration.update();

      // create interval to update every 5 minutes
      setInterval(() => {
        registration.update();
        console.debug('Checked for update...');
      }, 1000 * 60 * 5);   // <--- this will update your application after 5 minutes.

更新 PWA 应用程序（反应）

Update PWA application (react)

javascript

reactjs

service-worker

progressive-web-apps