PWA 基础

PWA（Progressive Web App）在普通网页上叠加 可安装、离线友好、类 App 体验——不靠应用商店，仍用 HTTPS 分发。核心是 Web App Manifest 与（通常）Service Worker；本课先建立 Manifest 与安装流程直觉。

学习目标

• 理解 Manifest 字段与「添加到主屏幕」流程
• 区分 PWA 与纯 Web、与原生 App 的能力边界
• 对照路线图 pwas 节点

Manifest 做什么

manifest.json（或 manifest.webmanifest）告诉浏览器：名字、图标、主题色、启动 URL、显示模式。

{
  "name": "CodeRoadMap 离线阅读",
  "short_name": "CRM",
  "start_url": "/tracks",
  "display": "standalone",
  "background_color": "#0f172a",
  "theme_color": "#38bdf8",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

HTML 引用：

<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#38bdf8" />

字段	作用
display: standalone	隐藏浏览器地址栏，更像 App
start_url	从主屏幕启动时的入口
icons	主屏幕与启动屏图标（多尺寸）

安装与更新体验

• Chrome / Edge：地址栏或菜单「安装应用」
• Safari iOS：「添加到主屏幕」（能力子集，SW 限制见后文）
• 更新：仍走 Web 部署；用户下次打开拉新版本（与 frontend-toolchain-essentials 静态/SSR 部署衔接）

PWA 不是自动离线：没有 Service Worker 时，只是「可安装的快捷方式」。

与 html-css / http 的衔接

• 布局与 css-responsive 移动优先一致——PWA 首屏多在手机
• 资源仍经 http-protocol-essentials 的 HTTPS；Manifest 必须 同源可访问
• 若用 react-essentials SPA，构建产物需把 manifest 与图标拷进 public/

能力边界（诚实预期）

能做	难做 / 受限