HTML怎么做Manifest配置_HTML Web App Manifest完整配置示例

Manifest 配置不生效主因是 start_url、icons 路径或 MIME 类型未对齐；manifest.json 必须置于根目录并返回 application/manifest+json 响应头，icons 需含 192×192 和 512×512 PNG 绝对路径，start_url 要适配部署路径，display: "standalone" 和 background_color 等字段不可忽略。

Manifest 配置不生效，90% 是因为 start_url、icons 路径或 MIME 类型没对齐；不是写完 JSON 就完事。

manifest.json 文件必须放在 Web 根目录且用正确 MIME 类型返回

浏览器只在 application/manifest+json 响应头下才识别 manifest。Nginx/Apache 默认不为此类文件设对类型，容易被当成 text/plain 拒绝解析。

• 检查响应头：curl -I https://yoursite.com/manifest.json，确认含 Content-Type: application/manifest+json
• Nginx 示例配置：location /manifest.json { add_header Content-Type "application/manifest+json"; }
• Webpack/Vite 项目中，确保 manifest.json 被复制到 dist/ 根目录（不是子文件夹），否则 href="/manifest.json" 会 404

start_url 必须可访问且与部署路径一致

start_url 是用户点击桌面图标后实际加载的路径，它不是“相对当前 manifest 的路径”，而是相对于站点根目录的 URL —— 但又不能硬写成绝对 URL，否则微前端或子路径部署时崩掉。

• 单页应用推荐写 "start_url": "./" 或 "start_url": "/"，避免带 .html 后缀（服务端需支持 history fallback）
• qiankun 子应用必须用相对路径："start_url": "./index.html"，否则主应用挂载后跳转 404
• 若部署在子路径如 https://a.com/myapp/，start_url 应为 "./" 或 "myapp/"，不能写 "/myapp/"（开头斜杠会强制跳根）

icons 数组必须含 192×192 和 512×512 PNG，且路径可被 public 访问

Chrome 安装 PWA 的硬性要求：至少两个图标，尺寸分别为 192x192 和 512x512，格式为 image/png，且能被浏览器直接 GET 到（比如打开 https://yoursite.com/icons/icon-192x192.png 不报 404）。

立即学习“前端免费学习笔记（深入）”；

• 路径建议全用绝对路径："src": "/icons/icon-192x192.png"，避免 ./ 或 ../ 引发解析歧义
• 不要复用 favicon.ico 当 icons —— ICO 不被 PWA 规范认可，type 必须是 image/png
• iOS 需额外加 <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">，否则“添加到主屏幕”无图标

display 和颜色字段影响启动体验，但常被忽略

display: "standalone" 不只是视觉开关，它决定系统是否允许“添加到主屏幕”及是否启用独立进程——设成 "browser" 或漏配，PWA 就退化成普通网页。

• background_color 是闪屏（splash screen）背景色，必须和 HTML 中 <meta name="theme-color"> 一致，否则 iOS 启动时白屏一闪
• theme_color 控制地址栏/状态栏颜色，Android 上生效明显；iOS 只认 <meta name="apple-mobile-web-app-status-bar-style">
• short_name 字符数别超 12，否则 Android 安装时截断难看；name 可稍长，但也要控制在合理范围

最容易被卡住的点其实是路径：manifest 里写的 src、HTML 里写的 href、服务器上真实文件位置、部署后的 URL 四者必须严格对齐。调不通先开 Network 面板，逐个点开 manifest.json 和每个 icon 链接，看是不是全 200。