HTML实现PWA安装提示教程

本文详解了HTML实现PWA安装提示的完整逻辑与实战要点，直击开发者常遇的“横幅不显示”痛点：不仅阐明Chrome等浏览器触发自动提示所需的四大硬性条件（HTTPS、合规manifest、已激活Service Worker、用户30秒停留+交互），更深度解析iOS完全不支持自动提示的现实限制及针对性优化方案——从manifest图标格式与字段的严苛要求，到手动捕获beforeinstallprompt事件并安全调用prompt()的代码规范，再到DevTools中逐项排查Manifest和服务工作线程状态的高效验证方法，手把手教你绕过陷阱、稳定唤起安装体验。

浏览器不会主动弹出“添加到主屏幕”提示，除非你同时满足 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()。

关键代码片段（放在