无需登录 数据私有 本地保存

PWA 安装提示管理器 - 自定义 A2HS 行为

41
0
0
0
A2HS(Add to Home Screen)

Add to Home Screen 是现代浏览器提供的一项功能,允许用户将网站添加到设备的主屏幕。添加后,网站可以像原生应用一样启动,拥有独立的窗口和应用图标。在 Android 设备上,当 PWA 满足条件时,浏览器会自动弹出安装提示;在 iOS 设备上,用户需要通过 Safari 的分享菜单手动操作。A2HS 是 PWA 生态的核心能力之一,直接影响用户的安装转化率,也是本工具服务的核心场景。

PWA(Progressive Web App)

Progressive Web App 是一种使用 Web 技术构建的应用形式,通过 Service Worker、HTTPS 和 manifest.json 等技术,为用户提供接近原生应用的体验。PWA 具有离线可用、推送通知、添加到主屏幕等能力,同时保持 Web 的开放性和可索引性。本工具生成的安装提示代码正是 PWA 生态中引导用户完成安装的关键组件,帮助开发者提升 PWA 的安装转化率和用户留存率。

beforeinstallprompt 事件

这是浏览器在 PWA 满足安装条件时触发的自定义事件。开发者可以通过 event.preventDefault() 阻止浏览器默认的安装提示,将事件保存到变量中,然后在自定义的 UI 元素上调用 deferredPrompt.prompt() 来触发安装流程。该事件仅在 Chromium 内核的浏览器中可用,是本工具生成自定义安装提示的技术基础。理解并正确使用该事件是实现自定义安装提示的关键。

Service Worker

Service Worker 是运行在浏览器后台的 JavaScript 脚本,独立于网页主线程。它能够拦截网络请求、缓存资源、推送通知,是实现 PWA 离线能力的核心技术。在触发安装提示方面,浏览器要求 PWA 必须注册并激活 Service Worker,且至少有一个 fetch 事件监听器。没有 Service Worker,浏览器不会触发 beforeinstallprompt 事件。本工具的状态检测功能可以检查 Service Worker 的注册状态。

manifest.json

Web App Manifest 是一个 JSON 格式的配置文件,描述了 PWA 的名称、图标、启动 URL、显示模式等元数据。浏览器通过读取 manifest.json 来了解应用的基本信息,是触发安装提示的必要条件之一。关键字段包括 name(应用全名)、short_name(短名称)、icons(图标数组,至少包含 192x192 和 512x512 尺寸)、start_url(启动地址)和 display(显示模式,推荐 standalone)。本工具提供 manifest.json 配置参考示例。

standalone 显示模式

manifest.json 中 display 字段的一种值,表示 PWA 以独立窗口运行,不显示浏览器的地址栏和导航按钮。设置为 standalone 后,PWA 在视觉上更接近原生应用,用户获得沉浸式的使用体验。其他可选值包括 fullscreen(全屏)和 minimal-ui(显示最小化的浏览器 UI)。本工具生成的代码会检测当前页面的 display-mode,避免向已安装用户重复展示安装提示。

冷却时间(Cooldown)

用户关闭安装提示后,浏览器或自定义逻辑设定的等待时间,在此期间不再向该用户展示安装提示。合理的冷却时间可以避免频繁打扰用户,提升用户体验。Chrome 浏览器内置了冷却机制,如果用户拒绝安装或关闭提示,浏览器会在一段时间内不再触发 beforeinstallprompt 事件。本工具的冷却时间设置允许开发者自定义这个等待周期,建议设置为 24 至 48 小时,平衡提示效果和用户体验。

参与度检查(Engagement Heuristics)

Chrome 浏览器使用的一套算法,用于判断用户是否与网站有足够的交互,从而决定是否触发安装提示。参与度检查考虑的因素包括用户在网站上的停留时间、页面浏览量、交互次数等。这是 Chrome 防止网站滥用安装提示的机制之一。本工具的触发条件设置(延迟触发、滚动触发、访问次数触发)可以帮助开发者在满足参与度要求后才展示提示,避免过早触发导致安装提示不出现。

display-mode 媒体查询

CSS 媒体查询特性,允许开发者根据 PWA 的显示模式应用不同的样式。例如 @media (display-mode: standalone) 可以在 PWA 以独立窗口运行时隐藏浏览器相关的 UI 元素。JavaScript 中可通过 window.matchMedia('(display-mode: standalone)').matches 进行检测。本工具利用此特性在预览中模拟 PWA 的显示效果,并在生成的代码中用于判断是否需要展示安装提示,避免重复打扰已安装用户。

navigator.standalone

iOS Safari 特有的只读属性,用于检测当前页面是否以独立模式(即已添加到主屏幕)运行。当 navigator.standalone === true 时表示用户已将 PWA 添加到主屏幕。由于 iOS 不支持 beforeinstallprompt 事件,该属性成为检测 iOS 设备上 PWA 安装状态的主要方式。本工具的 iOS 引导模板会使用此属性避免向已安装用户展示引导提示,确保用户体验的连贯性和专业性。