最近有需求要求页面离线缓存，所以使用了service-worker，找了很多资料，最后选择了webpack插件offline-plugin
参考了使用offline-plugin搭配webpack轻松实现PWA中的配置，但是还是遇到了很多问题，在这里记录一下
1. vue-cli3的问题
刚开始配置简单，发现状态改变时并没有触发对应的事件，于是增加了配置项
vuecli3的webpack配置在vue.config中，具体配置如下
这里直接将sw文件输出到根路径，并且开启了改变状态时触发对应的事件
module.exports = {
configureWebpack: {
plugins: [
new OfflinePlugin(
{
responseStrategy: 'cache-first', // 缓存优先
AppCache: false, // 不启用appCache
safeToUseOptionalCaches: true, // Removes warning for about `additional` section usage
ServiceWorker: {
output: './sw.js', // 输出目录
publicPath: './sw.js', // sw.js 加载路径
scope: '/', // 作用域
minify: true, // 开启压缩
events: true // 当sw状态改变时候发射对应事件
},
caches: 'all',
autoUpdate: 30000
}
)
]
}
}
更多配置内容请查阅https://github.com/NekR/offline-plugin/blob/master/docs/options.md
2. 事件触发
在这里希望得到的情况是，当检测到sw文件改变（代码发生更新变化）时，通过一个钩子函数来更新一下当前页面（例如： 弹出一个对话框询问发现更新的内容，提示是否立即更新）
在main.js中注册
当页面更新时, 将会触发如下几个钩子函数，使用OfflinePluginRuntime.applyUpdate()可以直接更新
import * as OfflinePluginRuntime from 'offline-plugin/runtime'
OfflinePluginRuntime.install({
onUpdateReady: () => {
console.log('SW Event:', 'onUpdateReady')
OfflinePluginRuntime.applyUpdate()
},
onUpdated: () => {
console.log('SW Event:', 'onUpdated')
// Reload the webpage to load into the new version
window.swUpdate = true
}
})
3 more
更多资料查阅
https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API
