我是 Vue 新手,使用 PWA Service-worker 插件创建了一个项目。部署我的应用程序的新版本后,我在控制台中收到以下消息:
刷新页面 (F5) 后,这些消息仍然以相同的方式显示,应用程序仍处于旧状态。我尝试了所有方法来清除缓存,但它仍然无法加载新内容。
在创建我的项目后,我没有对默认配置进行任何更改,也没有添加任何与 serviceworker 交互的代码。出了什么问题?我错过了什么吗?
最佳答案
据我了解,这个问题实际上只与 PWA 初学者有关,他们不知道您可以(并且需要)配置 PWA 来实现这一目标。如果你觉得现在(并且正在使用 VueJS)得到解决,请记住:
要自动下载新内容,您需要配置 PWA。在我的例子 (VueJS) 中,这是通过在我的项目的根目录中创建一个文件 vue.config.js
来完成的(与 package.json
处于同一级别)。
在这个文件中你需要这个:
module.exports = {
pwa: {
workboxOptions: {
skipWaiting: true
}
}
}
如果检测到,它将自动下载您的新内容。
但是,内容还不会显示给您的客户端,因为它需要在下载内容后刷新。我通过将 window.location.reload(true)
添加到我的 src/
目录中的 registerServiceWorker.js
来做到这一点:
updated () {
console.log('New content is available: Please refresh.')
window.location.reload(true)
},
现在,如果 Service Worker 检测到新内容,它会自动下载并刷新页面。
关于javascript - Vue PWA 刷新后没有获取新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54145735/