使用offline-plugin配置service-worker

最近有需求要求页面离线缓存，所以使用了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
  }
})

更多options请访问

3 more

更多资料查阅

https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API

https://x5.tencent.com/tbs/guide/serviceworker.html