最小可用manifest.json需包含name、short_name、start_url三个字段，且start_url须可访问；icons至少含192×192和512×512 PNG图标；display设为"standalone"或"minimal-ui"；theme_color与background_color建议一致；HTML中用<link rel="manifest" href="/manifest.json">引入，href必须为根路径，服务器需返回Content-Type: application/manifest+json。
HTML 本身不创建 manifest.json，它只是通过 <link rel="manifest"> 引入一个独立的 JSON 文件；这个文件必须由你手动编写并部署在 Web 服务器上，且路径、MIME 类型、HTTPS 环境都必须满足 PWA 要求，否则浏览器直接忽略。
怎么写一个最小可用的 manifest.json
合法的 manifest.json 至少要包含 name、short_name 和 start_url 三个字段，且 start_url 必须可访问（建议用相对路径，如 "./" 或 "index.html"）。
常见错误：漏掉 short_name（iOS Safari 会拒绝安装）、start_url 指向 404 页面、用绝对 URL 却没配好跨域或协议。
-
icons数组至少提供一个192x192和一个512x512PNG 图标（格式必须是 PNG，不能是 JPG 或 WebP；尺寸必须精确匹配） -
display推荐设为"standalone"或"minimal-ui"，"browser"无法触发“添加到主屏幕”提示 -
theme_color和background_color建议设成相同值，避免启动屏闪白
{
"name": "我的应用",
"short_name": "我的App",
"start_url": "./",
"display": "standalone",
"theme_color": "#333",
"background_color": "#333",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
HTML 中怎么正确引用 manifest.json
必须在 HTML 的 <head> 中添加一行 <link rel="manifest" href="/manifest.json">，且 href 是相对于站点根目录的路径（不是相对于当前 HTML 文件）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
常见错误：href 写成 "manifest.json"（相对当前页，易 404）、放在 <body> 里、加了 type="application/manifest+json"（多余且可能被拒）。
- 确保服务器返回的
manifest.json响应头包含Content-Type: application/manifest+json（Nginx/Apache 需显式配置；Vercel/Netlify 默认支持） - 本地开发时用
http://localhost可行，但file://协议完全不支持 PWA 特性 - 修改 manifest 后，旧缓存可能持续生效——可临时在 DevTools > Application > Manifest 页面点 “Update on reload” 强制刷新
为什么加了 manifest 还不弹“添加到主屏幕”提示
Chrome 和 Edge 只在满足「可信提示条件」时才显示安装横幅，不是加了 manifest 就自动触发。核心卡点有三个：HTTPS（本地 localhost 除外）、100% 安装就绪状态（Lighthouse Audit 中 “Installable” 得分 100）、用户与页面有至少 30 秒交互 + 两次导航（非刷新）。
- iOS Safari 不支持自动提示，只能手动点击「分享 → 添加到主屏幕」，且要求
short_name存在、图标尺寸达标、display为"standalone" - 如果 Lighthouse 报错
"Manifest does not have a maskable icon"，说明缺少purpose: "maskable"字段（仅影响 Android 自适应图标，非阻断项） - 检查 DevTools > Application > Manifest 页面是否显示解析成功；若显示 “Manifest not found”，优先排查路径和响应头
真正容易被忽略的是：manifest 文件内容变更后，浏览器不会主动拉取新版本——用户必须硬刷新（Ctrl+F5）或清空 Application > Clear storage 中的 “Cache storage” 才能生效。很多调试失败，其实只是卡在缓存里了。
