PWA 实战指南

PWA（渐进式 Web 应用）让网页拥有接近原生 App 的体验：离线可用、可安装、可推送。

Manifest 配置

{
  "name": "我的应用",
  "short_name": "应用",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#3b82f6",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Service Worker 缓存

// sw.js
const CACHE = "v1";
self.addEventListener("install", (e) => {
  e.waitUntil(
    caches.open(CACHE).then((c) => c.addAll(["/", "/app.js", "/style.css"]))
  );
});

self.addEventListener("fetch", (e) => {
  e.respondWith(
    caches.match(e.request).then((r) => r || fetch(e.request))
  );
});

核心能力

• 离线可用：Service Worker 缓存静态资源
• 可安装：添加到主屏幕
• 消息推送：Push API 触达用户
• 后台同步：网络恢复后同步数据

PWA 是 Web 和原生之间最佳的平衡点，尤其适合内容型、工具型应用。