PWA
约 545 字大约 2 分钟
PWA
2026-04-08
什么是 PWA
Progressive Web App（渐进式 Web 应用）是一种利用现代 Web API 构建、可以像原生应用一样安装、离线运行、接收推送的网页应用。它不是某一项技术，而是一套技术栈和理念的集合。
核心特征
- 渐进增强：新 API 只在支持的浏览器启用，不影响旧设备
- 离线可用：通过 Service Worker + Cache 存储资源
- 可安装：通过
manifest.json添加到主屏幕 / 桌面 - 可推送：结合 Push + Notification 支持服务端主动触达
- 响应式 & 全平台：一套代码跑在移动、桌面、平板
技术基座
| 技术 | 作用 |
|---|---|
| HTTPS | 安全前提 |
| Web App Manifest | 声明安装元数据 |
| Service Worker | 拦截请求、后台能力 |
| Cache API | 资源缓存层 |
| IndexedDB | 结构化数据离线存储 |
| Push / Notification | 消息推送 |
| Workbox | 工具库封装最佳实践 |
文档索引
- manifest.json 配置 —— 安装元数据、icons、shortcuts、beforeinstallprompt
- Service Worker 生命周期 —— 注册、install / activate / waiting、更新策略
- fetch 事件与请求拦截 —— FetchEvent、respondWith、请求分流与改写
- Cache API 与缓存策略 —— 五大缓存策略速查与版本管理
- Notification 与 Push —— 本地通知、Web Push 全流程、VAPID
- PWA 相关 API 总览 —— Background Sync / Share / Badging / File System Access 等
- Workbox 应用 —— 预缓存、路由、策略插件组合、构建工具集成
- Vue 中应用 PWA —— vite-plugin-pwa 完整示例、更新提示、离线队列
学习路径建议
- 先搞懂三大件：Manifest → Service Worker → Cache，这是最小可运行 PWA 的全部
- 理解缓存策略：读完 Cache 一篇后，能说出 Cache First / Network First / Stale While Revalidate 的适用场景
- 上手 Workbox：不要手写大量 SW 代码，直接用 Workbox 插件体系
- 框架集成：在自己的 Vue / React 项目里通过
vite-plugin-pwa接入一次 - 按需进阶：Push 通知、Background Sync、File System Access 等只在需要时再学