浏览器不显示“添加到主屏幕”横幅，是因为未同时满足https、有效manifest（含short_name及≥192×192图标）、已注册service worker、用户停留≥30秒并有交互；ios则完全不支持自动提示，仅支持手动“分享→添加到主屏幕”。
浏览器不会主动弹出“添加到主屏幕”提示，除非你同时满足 HTTPS、有效 manifest.json、已注册的 ServiceWorker，且用户已完成至少 30 秒停留 + 一次交互（如滚动或点击）。手动触发提示必须靠监听 beforeinstallprompt 事件并缓存它。
为什么页面没出现安装横幅？
这不是代码漏写，而是浏览器在执行一套严格启发式判断。常见卡点如下：
-
manifest.json缺少short_name或图标尺寸不足 192×192 —— iOS 和 Chrome 都会直接拒绝提示 -
sw.js注册失败但控制台静默（比如路径错、返回 404、MIME 类型不是application/javascript） - 开发时用
http://localhost:3000可以，但换成http://192.168.x.x:3000就失效 —— 非localhost的 HTTP 域名不被认可 - 页面刚加载完就刷新，
beforeinstallprompt事件只触发一次，错过就没了
如何捕获并手动触发安装提示？
不能靠 alert() 或自动弹窗，必须等 beforeinstallprompt 事件发生后保存事件对象，再由用户点击按钮触发 prompt()。
关键代码片段（放在 <script></script> 中）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
let deferredPrompt;<br>window.addEventListener('beforeinstallprompt', (e) => {<br> e.preventDefault();<br> deferredPrompt = e;<br> // 此时可显示自定义「添加」按钮<br> document.getElementById('installButton').style.display = 'block';<br>});<br><br>document.getElementById('installButton').addEventListener('click', () => {<br> if (deferredPrompt) {<br> deferredPrompt.prompt();<br> deferredPrompt.userChoice.then((choiceResult) => {<br> if (choiceResult.outcome === 'accepted') {<br> console.log('用户点了“添加”');<br> }<br> deferredPrompt = null;<br> });<br> }<br>});
注意：deferredPrompt.prompt() 只能调用一次，调完必须清空引用；且该调用必须由用户手势（click/tap）触发，不能放在 setTimeout 或异步回调里。
Chrome DevTools 里怎么快速验证？
打开 Application 面板，依次检查三项：
-
Manifest：右侧应显示图标预览、
name、start_url，且无红色警告。若提示 “No manifest found”，检查<link rel="manifest" href="/manifest.json">路径是否 404，以及服务器是否返回Content-Type: application/manifest+json -
Service Worker：Status 显示 “Activated and is running”，且
Update on reload已勾选。若显示 “Waiting” 或 “Redundant”，说明新版本未生效或旧版阻塞了激活 - Clear storage → 点击 “Clear site data” 后刷新重试 —— 缓存的坏状态常导致提示死活不出现
iOS Safari 上根本看不到提示怎么办？
iOS 不支持 beforeinstallprompt，也没有自动横幅。用户只能手动操作：“分享 → 添加到主屏幕”。但你可以优化体验：
- 确保
manifest.json中display设为"standalone"，否则添加后仍带地址栏 - 加一行
<meta name="apple-mobile-web-app-capable" content="yes">，启用全屏模式 - 用
<meta name="apple-mobile-web-app-status-bar-style" content="default">控制状态栏颜色（仅对 standalone 有效） - 别依赖 JS 提示 —— 在页面显眼处放静态文案：“长按下方按钮 → 分享 → 添加到主屏幕”
最易被忽略的一点：iOS 要求图标必须是 PNG 格式、无透明通道（alpha 通道会导致图标变黑），且 icons 数组中至少有一项 sizes 是 "192x192" 或更大 —— 少一个字段，整个 manifest 就被 Safari 忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
