记录vue配置service-worker缓存

需求： 页面配置缓存js,css,html文件和api数据，以便用户更快看到页面。

知识点：

service-worker相关

workbox相关

本文使用的是Workbox webpack Plugins插件。

vue.config.js

const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
	configureWebpack: {
        plugins: [
            new GenerateSW({
                clientsClaim: true, //service worker是否应该在任何现有客户端激活后立即开始控制它
                skipWaiting: true,//service worker是否应该跳过等待生命周期阶段，用于清除缓存，强制等待中的service-worker被激活
                globPatterns: ['**/*.{html,js,css,png.jpg}'], // 匹配的文件
            	globIgnores: ['service-wroker.js'], // 忽略的文件
                runtimeCaching: [
                    {
                        urlPattern: new RegExp('/api'),//相关接口正则配置，跨域接口必须以 ‘^’开头，配置完整域名
                        handler: 'NetworkFirst',//缓存策略，网络请求优先。
                        options: {
                            cacheableResponse: {
                                statuses: [200]
                            }
                        }
                    }
                ]
            })
        ]
    }
}

workbox-webpack-plugin包括两个模块GenerateSW和InjectManifest，由于只需要最基础的缓存配置，所以选用了GenerateSW自动生成service-worker.js文件。使用InjectManifest需要配置swSrc指明模版进行更多配置。

后续补充更多