vue.js - 为什么服务人员会自动下载新内容,但不更新?
问题描述
我以这种方式注册服务人员:
/* 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
。
推荐阅读
- r - R粘贴使用循环
- android - 如何在 ImageView 下将 TextView 居中?
- excel - 从函数返回服务器错误作为字符串?
- pandas - 在执行 K-Means 算法时检索索引
- python - 为什么以及何时使用新的 anaconda 环境?(一个环境适合一切?每个项目都有一个新环境?)
- python-3.x - 在 9 秒内打印尽可能多的数字,然后在第 10 秒打印“-1”
- html - 为由两个相邻 div 和剪辑路径生成的形状添加边框
- google-chrome - 无法修改 chrome 首选项文件中“prompt_for_download”的值
- flutter - Dart Flutter 如何在其类内部初始化一个类方法?
- flutter - Flutter + Get, toNamed() 返回 RouteSettings() 错误