一个 PWA 的诞生
内容提要
本文介绍用 Vue-cli3 搭建 PWA 的实践：勾选 PWA Support 生成项目，解决 HMR 连接问题，配置 ESLint 与 devServer overlay；用 imagemin 压缩图片、font-spider-plus 精简中文字体，并做响应式设计；讲解 manifest.json、Service Worker 缓存刷新与 skipWaiting 配置，以及用 Preload 预加载资源，最后给出完整配置仓库地址。
延伸解读
PWA 的跨平台意义与时机
文章指出，PWA 虽在 2015 年提出，但直到 iOS12 发布，iOS 才支持将 PWA 添加到主屏。只有安卓和 iOS 都能使用基本功能，PWA 才真正走近大众。这提醒开发者，PWA 的实用性受平台支持度制约，选择技术方案时需关注目标用户的系统版本。
Vue-cli3 搭建 PWA 的注意事项
使用 Vue-cli3 生成项目时需勾选 PWA Support。文章提到 HMR 可能无法使用，控制台一直显示 waiting，解决方案包括改用 npm 安装依赖，或在 vue.config.js 中配置 chainWebpack 的 resolve.symlinks(true)。此外，建议配置 devServer overlay 在 eslint 报错时覆盖页面，及时提醒。
资源优化：图片与中文字体
图片方面，可使用 imagemin-webpack-plugin 压缩，配置 pngquant 质量范围。中文字体体积庞大，常用字体动辄 10MB，严重影响体验。font-spider-plus 能提取页面实际用到的字符，大幅减小字体体积，但需手动操作，例如发布网页后用 fsp 爬取用到的字。
Service Worker 更新与缓存策略
Service Worker 更新后会进入 waiting 状态，旧 SW 仍运行，需关闭整个浏览器才能激活新 SW。配置 workboxOptions 的 skipWaiting 和 clientsClaim 可跳过等待并立即控制页面，但 SPA 仍需刷新才能渲染最新版本。另外，若 SW 文件 24 小时未更新，Update 触发时会强制更新，最坏情况下每天更新一次。
Q&A
如何用 Vue-cli3 创建一个 PWA 项目？
使用 Vue-cli3 创建项目时，在 feature 选择中勾选 PWA Support 即可生成带有 PWA 基础配置的项目。
Vue-cli3 项目 HMR 无法连接怎么办？
可以尝试两种解决方案：1. 如果依赖使用 cnpm 安装，删除 node_modules 后改用 npm 安装；2. 在 vue.config.js 中配置 chainWebpack: config => { config.resolve.symlinks(true); return config }。
如何优化 PWA 中的中文字体大小？
可以使用 font-spider-plus 工具，它能够分析网页中实际使用到的字符，从字体文件中抽离出这些字符，从而大幅减小中文字体体积。
Service Worker 更新后如何立即生效？
在 workboxOptions 中配置 skipWaiting: true 和 clientsClaim: true，可以跳过 waiting 状态并让新的 Service Worker 立即控制页面，但 SPA 可能仍需刷新才能渲染最新内容。
PWA 中 Preload 有什么作用？
Preload 可以预先下载必要的资源（如字体或图片），避免等到使用时才下载，从而减少等待时间，提升用户体验。
如何配置 ESLint 并在开发时显示错误覆盖层？
在 vue.config.js 的 devServer 中配置 overlay: { warnings: true, errors: true }，这样 ESLint 报错时会覆盖在页面上提醒。
