PWA 必须在 HTML head 中用 声明 manifest，且 href 须以 / 开头；需配置 viewport 为 width=device-width, initial-scale=1 并禁用 user-scalable=no；必须使用 HTTPS（或 localhost）；manifest 中需显式定义 theme_color 和 background_color，并设 display 为 "standalone" 或 "minimal-ui"。
manifest.json 文件必须通过 link 标签声明在 HTML 中
没有这行，浏览器根本不会识别你的 PWA。常见错误是把 manifest.json 放错路径，或漏掉 rel="manifest" 属性。
正确写法（放在 内）：
<link rel="manifest" href="/manifest.json">
-
href必须是相对根路径（以/开头），否则 Service Worker 无法正确读取 - 文件 MIME 类型需为
application/manifest+json，Nginx/Apache 要配置好，否则 Chrome 会静默忽略 - 不要用
<script></script>动态插入该标签——浏览器只在初始 HTML 解析阶段扫描manifest
必须有 meta name="viewport" 且 content 含 width=device-width
PWA 安装提示和全屏模式依赖响应式基础。如果 viewport 缺失或写成 width=1024 这类固定值，iOS Safari 直接拒绝显示“添加到主屏幕”按钮。
最小可用配置：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<meta name="viewport" content="width=device-width, initial-scale=1">
- Android Chrome 对此较宽容，但 iOS 是硬性要求
- 禁止使用
user-scalable=no，否则 iOS 不触发安装流程 - 这个
meta必须出现在 HTML 的中，不能靠 JS 注入
HTTPS 是强制前提，HTTP 环境下 navigator.serviceWorker 为 undefined
所有 PWA 核心能力（离线缓存、推送、后台同步）都依赖 Service Worker，而它只在 HTTPS 或 localhost 下注册成功。
- 开发时可用
localhost绕过，但一旦换成本机 IP（如192.168.x.x）就失效 - 自签名证书不行，必须是受信任 CA 签发，或使用
mkcert本地生成可信证书 - 检查方法：打开控制台，执行
typeof navigator.serviceWorker，返回"undefined"就说明环境不满足
theme_color 和 background_color 必须在 manifest.json 中显式定义
这两个字段影响安装后启动屏和地址栏颜色。缺失时 Android Chrome 会 fallback 到白色，导致闪白；iOS 则可能跳过生成启动图。
manifest 示例片段：
{
"theme_color": "#4285f4",
"background_color": "#ffffff",
"display": "standalone"
}
-
theme_color控制状态栏/地址栏颜色，建议与页面主色一致 -
background_color只用于启动屏背景，不是页面背景，别填成透明值（如#00000000） -
display: "standalone"或"minimal-ui"才能隐藏浏览器 UI，"browser"模式不算真正 PWA
PWA 的 HTML 支持点不多，但每个都是刚性开关——少一个，整个安装流程就卡在第一步。最容易被忽略的是 manifest 路径的斜杠开头和 viewport 的 user-scalable 限制，这两处出问题时没有任何报错，只是“加不到主屏幕”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
