我希望用户能够在新的服务人员可用并等待时立即进行更新?我已经能够显示一个弹出时,新的更新是可用的,但我想添加一个按钮,以强制更新现场。我知道这可以通过调用skipWaiting来实现,但不确定如何使用来实现它。有人能做到这一点吗?会很感激你的帮助。谢谢!
发布于 2018-10-25 22:04:33
我使用了一个名为https://github.com/bbhlondon/cra-append-sw的包来附加以下代码来调用触发器skipWaiting:
self.addEventListener('message', event => {
if (event.data === 'skipWaiting') {
self.skipWaiting();
}
});
发布于 2019-10-28 11:05:52
现在的CRA build\service-worker.js
文件(v3加号)包含处理skipWaiting
的代码。
self.addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
self.skipWaiting();
}
});
在serviceWorker.js
中调用的寄存器函数index.js
文件现在接受一个配置参数:
serviceWorker.register({
onUpdate: registration => {
const waitingServiceWorker = registration.waiting
if (waitingServiceWorker) {
waitingServiceWorker.addEventListener("statechange", event => {
if (event.target.state === "activated") {
window.location.reload()
}
});
waitingServiceWorker.postMessage({ type: "SKIP_WAITING" });
}
}
});
一旦应用了更新,这将跳过等待,然后刷新页面。
发布于 2019-05-02 09:58:31
在serviceWorker.js文件中可以找到以下代码
if (config && config.onUpdate) {
config.onUpdate(registration);
}
因此,实现config.onUpdate功能
创建一个文件swConfig.js
export default {
onUpdate: registration => {
registration.unregister().then(() => {
window.location.reload()
})
},
onSuccess: registration => {
console.info('service worker on success state')
console.log(registration)
},
}
在index.js将实现函数发送给serviceWorker
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import swConfig from './swConfig'
ReactDOM.render(<App />,
document.getElementById('root'));
serviceWorker.register(swConfig);
看看这个回购pwaupdate
https://stackoverflow.com/questions/52904430
复制