HTML中如何配置manifest.json实现添加到主屏幕-html教程-PHP中文网

不是必须，但强烈建议放根目录；浏览器默认从页面路径逐级回溯查找，但chrome/safari对非根路径支持不稳定，易导致添加到主屏幕失败。

html中如何配置manifest.json实现添加到主屏幕

manifest.json 文件必须放在 Web 服务器根目录吗？

不是必须，但强烈建议放根目录。浏览器在查找 manifest.json 时，默认从页面所在路径向上逐级回溯（比如 /app/index.html 会先查 /app/manifest.json，再查 /manifest.json），但多数浏览器（尤其是 Chrome 和 Safari）对非根路径的 manifest 支持不稳定，容易导致“添加到主屏幕”按钮不出现或图标加载失败。

实操建议：

把 manifest.json 放在网站根目录（如 https://example.com/manifest.json）
确保响应头包含 Content-Type: application/manifest+json（Nginx/Apache 需显式配置，否则部分 Android 浏览器会拒绝解析）
用浏览器开发者工具的 Application → Manifest 面板验证是否成功加载，注意看是否有红色错误提示

link 标签的 href 和 rel 属性怎么写才有效？

必须同时满足两个条件：路径可访问 + rel 值严格为 "manifest"。常见错误是写成 rel="application/manifest" 或漏掉 href 绝对路径导致跨子目录失效。

正确写法示例（放在 HTML 中）：

<link rel="manifest" href="/manifest.json">

关键点：

href 推荐用绝对路径（以 / 开头），避免在子路由下失效
不要加 type 属性——现代浏览器忽略它，且可能干扰解析
一个页面只允许一个 rel="manifest"，多个会被忽略
确保该 <link> 在 HTML 中位于其他资源（如 CSS/JS）之前，防止渲染阻塞导致检测延迟

manifest.json 必须包含哪些字段才能触发“添加到主屏幕”？

Chrome 要求至少有 name、short_name、icons（含至少一个 192×192 PNG）和 start_url；Safari（iOS）额外要求 display: "standalone" 才能隐藏地址栏并启用全屏体验。

Browser Js

轻量级CDP浏览器控制，适用于AI代理。相较于内置浏览器工具，token消耗降低3‑10倍，仅在浏览时使用。

下载

最小可用配置示例：

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

注意：

icons 数组里每个对象的 sizes 必须是字符串（如 "192x192"），不能是数字或数组
start_url 必须可访问且返回 HTTP 200，若指向重定向页（如 / → /home），某些 Android 版本会失败
display 值只能是 "standalone"、"minimal-ui" 或 "browser"；设为 "fullscreen" 已被废弃，会导致验证失败

为什么桌面 Chrome 不显示“添加到主屏幕”按钮？

Chrome 桌面版自 2020 年起已移除 A2HS（Add to Home Screen）入口，仅保留“安装 PWA”选项（需满足 Service Worker 注册 + manifest 加载 + 用户交互后才出现）。而移动端 Chrome、Edge、Samsung Internet 等仍支持原生 A2HS 提示。

排查重点：