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/"'
}