service-worker - reactjs 服务 worker 更新

Question

我有一个由 create-react-app 制作的 PWA。我默认启用了 Service Worker。

import registerServiceWorker from './registerServiceWorker'
import App from './App'
ReactDOM.render(
  <App />
  , document.getElementById('root'))
registerServiceWorker()

在每次发布时我都会更改包版本，但我的 service-worker 不会更新。

我试过函数

import { unregister } from './registerServiceWorker';
unregister()

如此处所述https://github.com/facebook/create-react-app

还有这个

navigator.serviceWorker.getRegistrations()
  .then(registrationsArray => {
    if (registrationsArray.length > 0) {
        registrationsArray[0].update()
    }
  })

它不起作用，我的错误是什么？怎么了？谢谢

Answer 1

更新到 react-scripts ^3.2.0。确认您拥有新版本的 serviceWorker.ts 或 .js。旧的名为 registerServiceWorker.ts 并且 register 函数不接受配置对象。这是新的:https://github.com/facebook/create-react-app/blob/3190e4f4a99b8c54acb0993d92fec8a859889a28/packages/cra-template/template/src/serviceWorker.js请注意，此解决方案仅在您不是延迟加载时才有效。

然后在 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，这会告诉 service worker 停止等待并在下次刷新后继续加载新内容。在此示例中，我使用 javascript 警报来通知用户。请将其替换为自定义 toast 。

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

更多关于 Service Workers 的信息

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

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

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