Question

我想修改create-react-app服务工作者file并实现弹出消息，该消息将要求用户更新应用程序是否准备好激活新的服务工作者。解决方案几乎完成了，但是有一个陷阱。我想在用户确认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，并且register函数不接受配置对象。请注意，仅当您不是“延迟加载”时，此解决方案才有效。

然后在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.ts register()函数的最新版本接受带有回调函数的配置对象，我们可以在其中处理升级。如果我们发布消息SKIP_WAITING，这将告诉服务人员停止等待，并在下一次刷新后继续加载新内容。在此示例中，我使用了JavaScript警报来通知用户。请用自定义吐司代替。

此postMessage函数起作用的原因是因为CRA在后台使用了workbox-webpack-plugin，其中包括一个SKIP_WAITING侦听器。

有关服务人员的更多信息

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

讨论服务工作者缓存的CRA问题：https://github.com/facebook/create-react-app/issues/5316

如果您不使用CRA，则可以直接使用工作箱：https://developers.google.com/web/tools/workbox

Answer 2

完成@jfbloom22's answer：

因为您可能想在检测到比普通 alert 更复杂的更新后询问用户，所以您需要确保 registration 对象可从 React 的组件树内部获得，并且保存以在用户接受更新后使用（例如，通过单击按钮）。

作为一个选项，您可以在组件中创建一个自定义事件侦听器，例如 document 等全局对象，并在 onUpdate 回调传递给 serviceWorker.register() 时触发此事件，传递给它resgistration 对象作为额外数据。

这正是我最近发布的 Service Worker Updater 所做的（一些自我宣传）。要使用它，您只需要：

将其添加到依赖项：

yarn add @3m1/service-worker-updater

在您的 index.js 中使用它：

import { onServiceWorkerUpdate } from '@3m1/service-worker-updater';

// ...

// There are some naming changes in newer Create React App versions
serviceWorkerRegistration.register({
  onUpdate: onServiceWorkerUpdate
});

在你的一些 React 组件中使用它：

import React from 'react';
import { withServiceWorkerUpdater } from '@3m1/service-worker-updater';

const Updater = (props) => {
  const {newServiceWorkerDetected, onLoadNewServiceWorkerAccept} = props;
  return newServiceWorkerDetected ? (
    <>
      New version detected.
      <button onClick={ onLoadNewServiceWorkerAccept }>Update!</button>
    </>
  ) : null; // If no update is available, render nothing
}

export default withServiceWorkerUpdater(Updater);

Answer 3

尝试在 installingWorker.state ==='已安装'中添加重新加载功能

     if (installingWorker.state === 'installed') {
        if (navigator.serviceWorker.controller) {
          // do something ..
        }
      }

在服务工作者更新上重新创建应用程序应用

3 个答案: