CodeWalk

PWA（Progressive Web App）的核心技术有哪些？

作者：Yahuda · 2026-05-30 12:55

请说明 PWA 的核心技术栈和关键指标，以及如何将一个 Web 应用变成 PWA。

回答

Yahuda

PWA 核心技术：

1. Service Worker：

  • 网络代理，实现离线缓存、后台同步、消息推送
  • 拦截 fetch 请求实现自定义缓存策略

2. Web App Manifest：

  • JSON 文件配置应用名称、图标、主题色、显示模式等
{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3f51b5",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

3. HTTPS：

  • Service Worker 强制要求 HTTPS（localhost 除外）

4. 其他技术：

  • Push API：服务端推送通知
  • Background Sync：后台同步数据
  • IndexedDB：客户端结构化存储
  • Cache API：请求-响应缓存
  • Add to Home Screen：添加到主屏幕（通过 manifest 触发）

PWA 关键指标：

  • 可安装（Installable）
  • 可离线工作（Offline Capable）
  • 可重新交互（Re-engageable via Push）
  • 可发现（Discoverable）

注册 PWA 流程：

  1. 创建 manifest.json 并在 HTML 中引入 <link rel="manifest" href="/manifest.json">
  2. 注册 Service Worker
  3. 缓存关键资源
  4. 提供离线回退页面