PWA桌面快捷方式需manifest.json、HTTPS和Service Worker三者协同；manifest必须含name、short_name、start_url、display、icons等字段，HTML仅需在head中正确引入manifest文件。
直接说结论：PWA 桌面快捷方式不是靠 HTML 单独实现的，而是 manifest.json + HTTPS + Service Worker 三者协同生效的结果；HTML 唯一要做的，就是正确引入清单文件。
manifest.json 必须包含哪些字段才能触发快捷方式
浏览器是否允许“添加到桌面”，取决于 manifest.json 是否满足最低元数据要求。缺一不可：
-
"name"和"short_name"都得有，且长度合理（short_name建议 ≤ 12 字符，避免 iOS 截断） -
"start_url"必须可访问，最好相对路径如"/"或"/index.html"，不能是带查询参数的动态 URL（某些 Android 版本会拒绝） -
"display"推荐设为"standalone"，"minimal-ui"在部分安卓机型上仍显示地址栏，体验打折 -
"icons"至少提供两个 PNG："192x192"和"512x512"，路径必须 404 可查（浏览器会预检图标存在性） -
"background_color"和"theme_color"虽非强制，但缺失会导致 Chrome 安装弹窗渲染异常或延迟出现
HTML 中 link 标签的写法和常见错误
<link rel="manifest" href="/manifest.json"> 这行必须放在 <head> 内，且路径要绝对（以 / 开头）。容易踩的坑：
- href 值写成
"./manifest.json"或"manifest.json"：本地开发可能侥幸成功，部署后 404，快捷方式失效 - 服务器没配 MIME 类型：Nginx/Apache 必须返回
application/manifest+json，否则 Chrome 直接忽略该文件 - 在多个 HTML 页面中漏写这行：用户从二级页进入时，
manifest.json不会被识别，安装提示不出现 - 把这行放在
<body>或异步 JS 注入：无效，浏览器只在解析<head>时读取
为什么加了 manifest 还不弹“添加到桌面”
这不是 bug，是浏览器主动限制行为。Chrome、Edge 等仅在满足以下条件时才考虑展示提示：
立即学习“前端免费学习笔记（深入）”；
- 页面已通过 HTTPS 访问（
localhost是例外，但仅限开发） -
Service Worker已成功注册并处于active状态（可在 DevTools → Application → Service Workers 查看） - 用户与页面有至少 30 秒交互（滚动、点击等），且不是首次访问
- 用户没手动拒绝过权限（
navigator.permissions.query({ name: 'notifications' })返回denied会影响安装意愿）
注意：beforeinstallprompt 事件才是可控入口——监听它、保存事件对象、绑定按钮点击触发 event.prompt()，这才是生产环境推荐做法，而非依赖浏览器自动弹窗。
Service Worker 不只是离线用，它也影响快捷方式可信度
很多开发者以为 SW 只管缓存，其实现代浏览器把 SW 当作“应用可信锚点”。如果注册了 SW 但没处理 fetch 事件，或 install 失败，Chrome 会降权该站点的安装优先级。
- 最简可用 SW 至少要有
install和activate事件监听器，哪怕里面只写self.skipWaiting() - 不要在
sw.js里写同步阻塞逻辑（比如XMLHttpRequest），会导致 install 失败，进而让快捷方式逻辑被跳过 - 注册时路径必须匹配：如果
manifest.json在根目录，navigator.serviceWorker.register('/sw.js')才有效；若 SW 放在/js/sw.js，注册路径就得严格对应
真正卡住快捷方式落地的，往往不是 manifest 字段写错，而是 SW 注册失败却没在控制台报错——记得打开 DevTools 的 Application 面板，亲手点一下 “Update on reload” 和 “Skip waiting”，确认状态栏显示 active。
