关于HTML中link标签的站点manifest关联_通过rel-manifest实现PWA应用-html教程-PHP中文网

rel="manifest"不起作用的主因是三个硬性条件未满足：https（localhost除外）、manifest.json被正确加载、link标签位置和写法合规；必须置于内且非动态插入，href须为绝对路径，服务器返回200及application/manifest+json。

关于html中link标签的站点manifest关联_通过rel-manifest实现pwa应用

rel="manifest" 标签不起作用，基本不是代码写错了，而是三个硬性条件没同时满足：HTTPS（localhost 除外）、manifest.json 被浏览器正确加载、link 标签本身位置和写法合规。

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

浏览器只在初始 HTML 解析阶段扫描 <link rel="manifest">，之后用 JavaScript 创建或插入完全无效。常见错误包括：

把 <link rel="manifest" href="/manifest.json"> 塞进 —— Chrome、Edge 静默忽略，控制台无警告
用 document.createElement('link') + appendChild 动态添加 —— 即使 DOM 中可见，也从未被识别
在 Vue/React 的 mounted 或 useEffect 里插入 —— 同样无效，时机已错过

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

href 必须是绝对路径，且服务器返回 200 + 正确 MIME 类型

href 值写成 "./manifest.json" 或 "manifest.json" 是高频错误。本地开发可能碰巧能加载，但部署后必然 404。

必须以 / 开头，如 href="/manifest.json"（根目录）或 href="/static/manifest.json"（子路径，需同步确保文件真实存在）
服务器必须返回 HTTP 状态码 200；返回 404 或 301 会直接放弃 PWA 安装流程
MIME 类型必须是 application/manifest+json：Nginx/Apache 需显式配置；Vercel/Netlify 默认支持，但自建 Node.js 或 Python 服务常漏设

验证方式：直接访问 https://yoursite.com/manifest.json，看是否返回 JSON 内容，且响应头含 Content-Type: application/manifest+json。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

manifest.json 文件名、内容与图标路径必须严格匹配

文件名不强制叫 manifest.json，但混用后缀极易出问题：

Chrome/Firefox/Edge 默认优先识别 manifest.webmanifest，推荐使用（语义更准、MIME 更明确）
iOS Safari 16.4+ 才支持 .webmanifest；旧版 Safari 只认 manifest.json，所以若目标用户含大量 iOS 用户，仍建议用 manifest.json
icons 数组中每个 src 必须可访问：比如写 "src": "/icons/icon-192x192.png"，就要确保该路径返回 200；任一图标 404，Chrome DevTools 的 Application → Manifest 面板会显示 “Invalid manifest” 或降级处理
short_name 字段必须存在且 ≤ 12 字符（含空格），否则 iOS Safari 直接屏蔽安装提示；name 建议 ≤ 30 字符

一个最小可用的 manifest.json 示例：

{
  "name": "飞书文档",
  "short_name": "飞书文档",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4a90e2",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

为什么 Application 面板显示 “No manifest found”？

这不是 manifest 写得不好，而是浏览器根本没拿到它。最该先查的三件事：

当前页面是否通过 HTTPS 访问（localhost 除外）？HTTP 域名下 rel="manifest" 和 Service Worker 都被禁用
打开 DevTools → Network，刷新页面，搜索 manifest.json，看请求是否 200，响应头是否有 Content-Type: application/manifest+json
检查 <link rel="manifest"> 是否真在里，且 href 路径和实际部署结构一致（比如 Nginx root 设为 /var/www/html，那 /manifest.json 就必须落在该目录下）