什么是 PWA？
PWA = 网站的能力 + 原生应用体验
┌─────────────────────────────────────────────────────────────
│ PWA 三大支柱
├─────────────────────────────────────────────────────────────
│
│ 1. Service Worker 2. Web App Manifest
│ ↓ ↓
│ 离线缓存 + 后台同步 安装到桌面 + 全屏运行
│
│ 3. HTTPS + 响应式设计
│ ↓
│ 安全传输 + 全设备适配
│
└─────────────────────────────────────────────────────────────
一句话定义：
PWA 是使用现代 Web 技术构建的应用，具备离线可用、可安装、推送通知等原生应用特性，同时保持 Web 的跨平台、无需安装优势。
2.核心技术原理
2.1 Service Worker — PWA 的心脏
┌─────────────────────────────────────────────────────────────
│ Service Worker 架构
├─────────────────────────────────────────────────────────────
│
│ 用户请求 Service Worker 网络/缓存
│ │ │ │
│ │ ┌───────────────────┼───────────────────┐ │
│ │ │ │ │ │
│ │────▶│ 拦截所有 │───缓存命中?───────▶│ 是
│ │ │ 网络请求 │ │
│ │ │ │ │ │
│ │ └───────────────────┼───────────────────┘ │
│ │ │ 否 │
│ │ ▼ │
│ │ 从网络获取 │
│ │ │ │
│ │ ▼ │
│ │ 缓存资源 │
│ │ │ │
│ └────────────────────────┼─────────────────────────┘
│ ▼
│ 返回给页面
│
└─────────────────────────────────────────────────────────────
2.2 Service Worker 生命周期
注册 (Register)
│
▼
安装 (Install) ←── 预缓存应用外壳和关键资源
│
▼
激活 (Activate) ←── 清理旧缓存
│
▼
运行 (Fetch) ←── 拦截网络请求，提供缓存或网络响应
2.3 Caching 策略
| 策略 |
说明 |
适用场景 |
| Cache First |
优先缓存，无则网络 |
静态资源 |
| Network First |
优先网络，失败用缓存 |
实时数据 |
| Stale While Revalidate |
先用缓存，后台更新 |
API 数据 |
| Cache Only |
只从缓存读取 |
离线页面 |
| Network Only |
只从网络读取 |
敏感数据 |
3.PWA 核心能力
3.1 离线可用
传统网页：离线 → ❌ 无法访问 / 404 错误
PWA： 离线 → ✅ 显示缓存内容 / 离线提示页
3.2 推送通知
┌─────────────────────────────────────────────────────
│ 推送通知流程
├─────────────────────────────────────────────────────
│
│ 服务器 ──推送消息──▶ Push Service ──▶ Service Worker
│ (Firebase (FCM/APNs) │
│ Cloud/Messaging) │
│ ▼
│ 显示通知
│ (即使应用关闭)
│
└─────────────────────────────────────────────────────
4.技术架构对比
4.1 三种应用形态对比
| 特性 |
原生 APP |
Hybrid APP |
PWA |
| 开发语言 |
Swift/Kotlin |
JS/WebView |
HTML/CSS/JS |
| 平台 |
iOS 或 Android |
跨平台 |
全平台 |
| 安装方式 |
应用商店下载 |
应用商店下载 |
浏览器添加 |
| 更新方式 |
审核发布 |
审核发布 |
即时更新 |
| 离线能力 |
✅ 强 |
⚠️ 有限 |
✅ 强 |
| 推送通知 |
✅ |
⚠️ 受限 |
✅ |
| 性能 |
⭐⭐⭐⭐⭐ |
⭐⭐⭐ |
⭐⭐⭐⭐ |
| 开发成本 |
高 |
中 |
低 |
| 获客难度 |
高 |
中 |
低 |
5.技术栈与工具
5.1 核心依赖
| 类型 |
工具 |
| 构建工具 |
Vite, Create PWA, Workbox |
| 框架支持 |
Next.js, Nuxt, Angular Service Worker |
| Service Worker |
Workbox (Google), sw-precache |
| 测试 |
Lighthouse, Puppeteer |
| 分析 |
Firebase Analytics, Google Analytics |
5.2 快速启动命令
1
2
3
4
5
6
7
8
9
|
npm create vite@latest my-pwa -- --template react
npm install vite-plugin-pwa
npx create-pwa my-app
ng add @angular/pwa --project my-app
|
5.3 Lighthouse 审计
1
2
3
4
5
6
7
8
9
|
npx lighthouse https://my-pwa-site.com --view
|
6.典型应用场景
✅ 电商网站 → 离线浏览商品、推送促销通知
✅ 新闻媒体 → 文章缓存、离线阅读
✅ 社交应用 → 推送通知、后台同步
✅ 工具类应用 → 待办事项、计算器（离线可用）
✅ 移动端优先 → 替代原生 APP 降低成本