PWA 项目怎么排查 Manifest 配置文件不生效的常见原因-H5教程-PHP中文网

Manifest 配置文件不生效是 PWA 无法触发“添加到主屏幕”的最直接信号，需从加载路径（根目录绝对路径）、响应头（Content-Type 正确）、HTML 引用（head 内静态 link 标签）、图标尺寸与格式（192×192 和 512×512 PNG）、必填字段、HTTPS 环境及 iOS 兼容性六方面系统排查。

pwa 项目怎么排查 manifest 配置文件不生效的常见原因

Manifest 配置文件不生效，是 PWA 无法触发“添加到主屏幕”最直接的信号。问题往往不是 manifest.json 写错了，而是它根本没被浏览器正确加载或识别。排查要从加载路径、响应头、HTML 引用三者联动入手。

manifest.json 文件路径和服务器响应是否正确

manifest.json 必须放在网站根目录（如 /manifest.json），且通过绝对路径引用。相对路径（./manifest.json 或 manifest.json）在多数浏览器中会被忽略。

打开 Chrome 开发者工具 → Network 标签页，刷新页面，搜索 manifest.json，确认状态码是 200，不是 404 或 301/302
点击该请求，检查 Response Headers 中是否包含：
Content-Type: application/manifest+json（推荐用 .webmanifest 后缀）或 application/json（若用 .json 后缀）
Nginx/Apache 需显式配置 MIME 类型，否则即使文件存在，也会因类型错误被降级处理

HTML 中的 link 标签是否规范写入

必须写在内，且不能由 JavaScript 动态插入——浏览器只在初始 HTML 解析阶段扫描它。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

检查是否误写在里，或通过 document.createElement 添加
确保它出现在和之后、尽可能靠前的位置
验证是否完整：必须含 width=device-width, initial-scale=1，iOS Safari 会因此屏蔽安装入口

manifest.json 内容是否满足最低合规要求

Chrome 要求至少两个关键图标尺寸（192×192 和 512×512），且均为 PNG 格式；缺失任一，就不会弹出安装提示。

检查 "icons" 数组是否包含至少两项：
— {"src":"/icon-192x192.png","sizes":"192x192","type":"image/png"}
— {"src":"/icon-512x512.png","sizes":"512x512","type":"image/png"}
所有图标路径需能真实访问（在 Network 中逐个点开验证是否返回 200）
必填字段不能缺失："name"、"short_name"、"start_url"、"display": "standalone"
用 JSONLint 等工具校验语法，逗号遗漏、引号不匹配等低级错误会导致整个文件解析失败