更新到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

完成@jfbloom22 的回答：

由于您可能想在检测到比普通 更复杂的更新后询问用户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);

尝试在 installationWorker.state === 'installed' 中添加重新加载功能

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