PWA

2019-06-10

PWA 是 Progressive Web Apps 的简称

中文叫渐进式web模型，或者叫下一代web模型。

我们可以理解成谷歌版小程序（其实它是小程序的爷爷！）

给 VUE 项目添加 PWA

新版vue脚手架模版已经集成pwa，这次是针对老的vue项目升级pwa。

首先把webpack从3.x升级到4.x，处理掉中间的各种兼容问题后：

安装 @vue/cli-plugin-pwa 插件，安装的时候会自动更新配置，比如它会找到入口文件src/main.js 并引入 registerServiceWorker.js

import './registerServiceWorker'

然后安装 workbox-webpack-plugin 模块：

yarn add workbox-webpack-plugin -D

接下来编辑webpack.prod.conf.js给生产环境下的webpack配置添加插件相关配置

const WorkboxPlugin = require('workbox-webpack-plugin');

plugins: [
    new WorkboxPlugin.GenerateSW({
        cacheId: 'bbq', // 设置前缀
        skipWaiting: true, // 强制等待中的 Service Worker 被激活
        clientsClaim: true, // Service Worker 被激活后使其立即获得页面控制权
        swDest: 'service-worker.js', // 输出 Service worker 文件
        globDirectory: 'dist',
        globPatterns: ['**/*.{html,js,css,png.jpg}'], // 匹配的文件
        globIgnores: ['service-worker.js'], // 忽略的文件
        runtimeCaching: [
            // 配置路由请求缓存
            {
            urlPattern: /.*\.js/, // 匹配文件
            handler: 'networkFirst' // 网络优先
            }
        ]
    }),
    ...
]

最后还要修改 config\prod.env.js 文件，给它添加BASE_URL变量：

module.exports = {
    NODE_ENV: '"production"',
    BASE_URL: '"/vue/"'
}