我有一个由 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()
}
})
它不起作用,我的错误是什么?怎么了? 谢谢
最佳答案
更新到 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
关于service-worker - reactjs 服务 worker 更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52329897/