如何解决为什么服务人员自动下载新内容但不更新?
我这样注册服务工作者:
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`,{
ready() {
console.log('App is being served from cache by a service worker.');
},registered() {
console.log('Service worker has been registered.');
},cached() {
console.log('Content has been cached for offline use.');
},updatefound() {
console.log('New content is downloading.');
},updated() {
console.log('New content is available; please refresh.');
},offline() {
console.log('No internet connection found. App is running in offline mode.');
},error(error) {
console.error('Error during service worker registration:',error);
}
});
}
当我vue-cli-service build --mode production
然后部署到服务器时,可以在线正确查看日志:
App is being served from cache by a service worker.
Service worker has been registered.
New content is downloading.
New content is available; please refresh.
它似乎会自动下载内容,但是从现在开始,它仍然始终显示New content is available; please refresh
(实际上,内容没有刷新)。
看来它不会自动刷新?仅下载?为什么?
如何刷新updated()
?
解决方法
您应该使用服务工作者对象的skipWaiting
方法。
也许这可以帮助您:
updated(registration){
const waitingServiceWorker = registration.waiting;
if (waitingServiceWorker) {
waitingServiceWorker.addEventListener('statechange',event => {
if (event.target.state === 'activated') {
window.location.reload();
}
});
waitingServiceWorker.postMessage({ type: 'SKIP_WAITING' });
}
}
此代码是否起作用取决于您的service-worker.js
内容。
但是您应该使用skip waiting
的想法。
在这种情况下,我要做的是解决一个承诺,该承诺将为用户重新加载页面。很好,因为它会等待,然后在数据输入后重新加载页面。
/* eslint-disable no-console */
import { register } from 'register-service-worker'
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`,{
ready() {
console.log('App is being served from cache by a service worker.');
},registered() {
console.log('Service worker has been registered.');
},cached() {
console.log('Content has been cached for offline use.');
},updatefound() {
console.log('New content is downloading.');
},updated() {
console.log('New content is available; please refresh.');
Promise.resolve().then(() => { window.location.reload(true); });
},offline() {
console.log('No internet connection found. App is running in offline mode.');
},error(error) {
console.error('Error during service worker registration:',error);
}
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。