更新 PWA 应用程序（反应）答案

【问题标题】：Update PWA application (react)更新 PWA 应用程序（反应）
【发布时间】：2023-12-26 14:02:01
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs progressive-web-apps service-worker

【解决方案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.

【讨论】：

我不建议使用这种类型的变量 (1000 * 60 * 5)。我宁愿在代码块之外创建一个常量并将其传递给间隔时间。