HTML中实现PWA渐进式Web应用的manifest.json配置-html教程-PHP中文网

manifest.json 文件不强制要求放在 web 根目录，但强烈建议放置于根目录；若置于子路径（如 /static/manifest.json），需在中显式指定正确 href 路径，否则浏览器默认请求 /manifest.json 会 404 并静默放弃 pwa 安装。

html中实现pwa渐进式web应用的manifest.json配置

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

不是必须，但强烈建议放根目录。浏览器默认只在根路径下请求 /manifest.json，如果放错位置（比如 /static/manifest.json），除非你在 <link> 标签里显式写对路径，否则 Chrome、Edge 等会直接 404 并静默放弃 PWA 安装逻辑。

常见错误现象：Manifest: Line number N, column M: Invalid manifest 或控制台提示 The provided manifest is empty or malformed，往往就是路径没配对或服务器没返回正确 MIME 类型（应为 application/manifest+json）。

实操建议：

把文件命名为 manifest.json，放在网站根目录（即能通过 https://yoursite.com/manifest.json 直接访问）

在 HTML 的中加：

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

Nginx/Apache 需确保该文件响应头含 Content-Type: application/manifest+json；Vercel、Netlify 默认支持，但自建服务常漏配

name 和 short_name 到底怎么填才不被拒？

PWA 安装弹窗和桌面图标上显示的名称由这两个字段决定，但它们有明确分工和限制：Chrome 要求 short_name 必须存在且 ≤ 12 个字符（含空格），name 可稍长但建议 ≤ 30 字符；若两者都缺或超长，iOS Safari 会直接忽略安装提示，Android Chrome 可能降级显示 URL。

容易踩的坑：

short_name 写成全称（如 "My Awesome E-commerce Platform"）→ 触发截断或安装失败
用了 emoji 或不可见 Unicode 字符 → 解析失败，报 Invalid manifest
name 和 short_name 完全一样 → 某些 Android 版本图标文字重叠显示

推荐写法：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

{<br>  "name": "飞书文档",<br>  "short_name": "飞书文档"<br>}

（中文场景下二者可一致，只要字符数合规）；英文常用 "name": "GitHub Enterprise" + "short_name": "GitHub"。

icons 数组里哪些尺寸是真正生效的？

不是所有尺寸都会被用到。Android 主屏幕图标优先取 192x192 和 512x512（必须提供，否则 Chrome 不触发“添加到主屏幕”提示）；iOS Safari 完全忽略 manifest.json 中的 icons，只认 <link rel="apple-touch-icon">，所以别指望靠它适配 iOS。

关键参数差异：

sizes 字段必须精确匹配，写成 "192x192"，不能是 "192" 或 "192px"
src 路径建议用绝对路径（如 "/icons/icon-192.png"），避免相对路径在子页面失效
type 推荐显式声明："image/png"；WebP 在部分旧 Android 上不支持，稳妥起见用 PNG

最小可用配置示例：

{<br>  "icons": [<br>    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },<br>    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }<br>  ]<br>}

start_url 和 display 属性影响离线体验吗？

直接影响。用户点击桌面图标启动时，浏览器会从 start_url 开始加载——如果它指向一个需登录的页面，而用户未登录，就会卡白屏；display 决定是否隐藏地址栏："standalone" 最接近原生 App 体验，"minimal-ui" 保留后退按钮但无地址栏，"browser" 就是普通标签页。

性能与兼容性注意点：

start_url 必须是同源路径，且最好指向一个能离线缓存的页面（配合 Service Worker）；写成 "./" 或 "index.html" 在路由模式（如 React Router）下可能出错，推荐写完整路径如 "/app/"
display: "standalone" 在 iOS Safari 上无效（它始终走 minimal-ui 行为），但 Android Chrome 和 Edge 会严格遵循
如果应用依赖 URL 参数（如邀请码），start_url 里不要硬编码参数，应在 JS 中动态处理

真实项目中，最易被忽略的是 start_url 没做离线 fallback —— 用户首次安装后立刻断网，点图标就白屏，根本不会触发 Service Worker 的 install 事件。