HTML中实现添加到主屏幕功能的条件与提示引导方法-html教程-PHP中文网

web app manifest 文件必须满足：name 或 short_name 存在且 ≤12 字符；icons 至少含 192×192 和 512×512 png；start_url 返回 200；display 设为 standalone 或 minimal-ui；https 提供且响应头为 application/manifest+json。

html中实现添加到主屏幕功能的条件与提示引导方法

Web App Manifest 文件必须满足哪些硬性条件

不配置有效的 manifest.json，iOS 和 Android 都不会触发“添加到主屏幕”（A2HS）提示。关键字段缺一不可：

name 或 short_name 必须存在，且长度 ≤ 12 个字符（iOS 对 short_name 更敏感）
icons 数组中至少包含一个 192x192 和一个 512x512 的 PNG 图标，type 显式声明为 "image/png"
start_url 必须可访问，且返回 HTTP 200（不能是重定向或 404）
display 推荐设为 "standalone" 或 "minimal-ui"；设为 "browser" 会直接禁用 A2HS
整个 manifest.json 必须通过 HTTPS 提供（localhost 除外），且响应头含 Content-Type: application/manifest+json

iOS Safari 添加到主屏幕的特殊限制

iOS 不识别 Web App Manifest，只认 <meta> 标签，且仅在用户手动点击「分享 → 添加到主屏幕」时生效——它从不主动弹窗提示。

必须在中添加：<meta name="apple-mobile-web-app-capable" content="yes">
图标要用 <link rel="apple-touch-icon" href="/icon-192x192.png">，尺寸建议 180×180（iPhone X+ 最佳）
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 可控制状态栏颜色，但仅对 standalone 模式有效
没有 beforeinstallprompt 事件，无法监听或延迟提示；也无法通过 JS 触发添加流程
如果页面有 PWA 缓存但未声明 apple-mobile-web-app-capable，Safari 仍以普通浏览器标签打开

Chrome / Edge 等 Chromium 浏览器的 beforeinstallprompt 事件处理

这个事件只在满足安装条件后触发一次，且默认被浏览器抑制——你得自己缓存事件、阻止默认行为、再择机调用 prompt()。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

监听时机：在 window.addEventListener('beforeinstallprompt', e => { ... }) 中捕获，但需确保页面已加载完成、Service Worker 已注册并控制页面
必须调用 e.preventDefault()，否则后续 e.prompt() 会抛错 TypeError: Failed to execute 'prompt' on 'BeforeInstallPromptEvent'
不能立即调用 e.prompt()，需由用户手势（如按钮点击）触发，否则被静默拒绝
调用 e.prompt() 后，只能检查 outcome 属性（"accepted" 或 "dismissed"），无法再次调用
常见误操作：把事件监听写在异步模块里导致错过首次触发；或未判断 e.userChoice 就重复绑定

如何友好地引导用户手动添加（跨平台兼容方案）

纯自动提示不可靠，尤其 iOS 完全无 API 支持。最稳妥的方式是检测环境 + 用户行为 + 轻量提示。

用 navigator.standalone 判断是否已在 iOS 主屏幕运行（仅 Safari 有效）
用 matchMedia('(display-mode: standalone)') 检测是否处于 standalone 模式（Android/iOS 均支持）
检查 navigator.userAgent 是否含 "iPhone" 或 "iPad"，再结合 standalone === false 判断需引导 iOS 用户
对 Android 用户，在 beforeinstallprompt 触发后显示一个非侵入式 banner，按钮文案明确写「添加到主屏幕」而非「安装」
避免全屏遮罩或频繁弹窗——Chrome 会将反复触发 A2HS 的站点加入黑名单，后续不再提示