利用HTML代码中的link标签引入Web App的Manifest配置-html教程-PHP中文网

必须写在内且不可动态插入，浏览器仅在初始html解析时识别；href须为根路径绝对url，content-type必须为application/manifest+json，否则静默失败。

利用html代码中的link标签引入web app的manifest配置

link rel="manifest" 必须写在里，且不能动态插入

浏览器只在初始 HTML 解析阶段扫描 <link rel="manifest">，之后用 JavaScript 创建或插入完全无效。把标签塞进或在 Vue 的 mounted、React 的 useEffect 里添加，Chrome 和 Edge 都会静默忽略——控制台不报错，但 Application → Manifest 面板里压根看不到内容。

正确做法是：确保它出现在内，最好紧贴 <meta charset> 和 <meta name="viewport"> 后面。例如：

  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="manifest" href="/manifest.json"><title>My PWA</title>

绝对禁止用 document.createElement('link') + appendChild 动态挂载
不要放在条件注释、模板字符串或服务端渲染的延迟区块里
如果用构建工具（如 Vite/webpack），确认 index.html 是最终输出的入口 HTML，不是开发时的模板

href 必须是根路径绝对 URL，不是相对路径

写成 href="manifest.json" 或 href="./manifest.json" 是高频错误。本地开发可能碰巧加载成功，但部署后必然 404——因为浏览器默认从站点根目录请求 /manifest.json，而你的相对路径会被解析成当前页面 URL 下的子路径，比如 https://example.com/app/index.html 页面里写 ./manifest.json，实际请求的是 https://example.com/app/manifest.json，而非 https://example.com/manifest.json。

项目部署在根目录：用 href="/manifest.json"
项目部署在子路径（如 /myapp/）：用 href="/myapp/manifest.json"，且确保文件真实放在该路径下
若 manifest 放在 /static/manifest.json，href 就必须是 href="/static/manifest.json"，不能省略 /static/
直接访问 https://yoursite.com/manifest.json 要返回 200 状态码和 JSON 内容，否则浏览器直接放弃

manifest.json 必须返回 application/manifest+json MIME 类型

即使路径正确、JSON 格式合法，服务器没返回正确的 Content-Type 响应头，Chrome 就会静默失败——没有报错，Application → Manifest 面板为空，也不触发“添加到主屏幕”提示。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

验证方式很简单：打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找到 manifest.json 请求 → 查看 Response Headers 是否含 Content-Type: application/manifest+json。如果没有：

Nginx 用户加配置：location /manifest.json { add_header Content-Type "application/manifest+json"; }
Apache 用户加：AddType application/manifest+json .json（需配合 mod_mime）
Vercel/Netlify 默认支持；但自建 Node.js（如 Express）、Python（如 Flask）服务常漏设，需手动设置响应头
Webpack/Vite 构建时，确保 manifest.json 被复制到 dist/ 根目录，而不是嵌套在子文件夹里

manifest.json 里 icons 和 start_url 的路径必须可访问且格式严格

Chrome 安装 PWA 的硬性要求：icons 数组至少含两个对象，分别对应 sizes: "192x192" 和 sizes: "512x512"，type 必须是 "image/png"，且每个 src 路径必须能被浏览器直接 GET 成功（比如打开 https://yoursite.com/icons/icon-192x192.png 返回 200）。常见坑点：

sizes 字段必须是字符串 "192x192"，不是数字 192x192，也不是中文全角 ×
src 推荐用绝对路径（如 "/icons/icon-192x192.png"），避免 ./ 或 ../ 引发解析歧义
start_url 必须是可解析为绝对 URL 的值，推荐写 "./" 或 "/"；写 "index.html" 在 history 模式下易导致离线 404
部署在子路径时，start_url 不能写 "/myapp/"（开头斜杠强制跳根），应写 "./" 或 "myapp/"
short_name 必须存在且 ≤12 字符（含空格），否则 iOS Safari 直接屏蔽安装提示