在 Service Worker 更新时重新加载 Create-react-app

Question

我想修改create-react-appservice worker文件并实现弹出消息，如果新的 service worker 准备好激活，它将要求用户更新应用程序。我几乎完成了解决方案，但有一个陷阱。我想在用户确认 service worker 更新弹出窗口时重新加载应用程序，所以我在register函数的末尾添加了一些代码，见下文：

export default function register(config) {
  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return
    }

    window.addEventListener("load", () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`

      if (isLocalhost) {
        // This is running on localhost. Lets check if a service worker still exists or not.
        checkValidServiceWorker(swUrl, config)

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            "This web app is being served cache-first by a service " +
              "worker."
          )
        })
      } else {
        // Is not local host. Just register service worker
        registerValidSW(swUrl, config)
      }

      let preventDevToolsReloadLoop
      navigator.serviceWorker.addEventListener("controllerchange", function() {
        // ensure refresh is called only once
        if (preventDevToolsReloadLoop) {
          return
        }

        preventDevToolsReloadLoop = true
        console.log("reload")
        window.location.reload(true)
      })
    })
  }
}

但问题是它在第一次访问时也会重新加载应用程序，当时还不存在任何服务工作者。我该如何解决？

Answer 1

更新到react-scripts^3.2.0。验证您是否拥有新版本的 serviceWorker.ts 或 .js。旧的被调用registerServiceWorker.ts并且注册函数不接受配置对象。请注意，此解决方案仅适用于非延迟加载的情况。

然后在 index.tsx 中：

  serviceWorker.register({
    onUpdate: registration => {
      alert('New version available!  Ready to update?');
      if (registration && registration.waiting) {
        registration.waiting.postMessage({ type: 'SKIP_WAITING' });
      }
      window.location.reload();
    }
  });

最新版本的 ServiceWorker.tsregister()函数接受一个带有回调函数的配置对象，我们可以在其中处理升级。如果我们发布一条消息，SKIP_WAITING这会告诉 Service Worker 停止等待并在下一次刷新后继续加载新内容。在这个例子中，我使用一个 javascript 警报来通知用户。请用自定义吐司替换它。

这个postMessage函数起作用的原因是因为 CRA 正在使用workbox-webpack-plugin它包括一个SKIP_WAITING监听器。

更多关于 Service Worker

好的指南：https : //redfin.engineering/how-to-fix-the-refresh-button-when-using-service-workers-a8e27af6df68

CRA 问题讨论 Service Worker 缓存：https : //github.com/facebook/create-react-app/issues/5316

如果没有使用CRA，可以直接使用workbox：https : //developers.google.com/web/tools/workbox