最近有需求要求頁面離線緩存悟狱，所以使用了service-worker钥庇，找了很多資料媚狰，最后選擇了webpack插件offline-plugin
參考了使用offline-plugin搭配webpack輕松實現(xiàn)PWA中的配置憋沿，但是還是遇到了很多問題勿璃，在這里記錄一下
1. vue-cli3的問題
剛開始配置簡單，發(fā)現(xiàn)狀態(tài)改變時并沒有觸發(fā)對應的事件，于是增加了配置項
vuecli3的webpack配置在vue.config中，具體配置如下
這里直接將sw文件輸出到根路徑榛臼，并且開啟了改變狀態(tài)時觸發(fā)對應的事件
module.exports = {
configureWebpack: {
plugins: [
new OfflinePlugin(
{
responseStrategy: 'cache-first', // 緩存優(yōu)先
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狀態(tài)改變時候發(fā)射對應事件
},
caches: 'all',
autoUpdate: 30000
}
)
]
}
}
更多配置內(nèi)容請查閱https://github.com/NekR/offline-plugin/blob/master/docs/options.md
2. 事件觸發(fā)
在這里希望得到的情況是，當檢測到sw文件改變（代碼發(fā)生更新變化）時窜司，通過一個鉤子函數(shù)來更新一下當前頁面（例如： 彈出一個對話框詢問發(fā)現(xiàn)更新的內(nèi)容沛善，提示是否立即更新）
在main.js中注冊
當頁面更新時, 將會觸發(fā)如下幾個鉤子函數(shù)，使用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
