PWA 信号探针

…
visibility
–
hasFocus()
–
rAF fps
–
视口 vv
–
最近事件:–
推断:空闲

状态推断 (根据「展开分享面板才失焦」这个发现)

空闲

规则:页面可见时失焦,就判定为原生面板盖住了页面(很可能是展开的分享面板)。之后焦点回来、期间没进后台,判定为取消返回。失焦后进了后台,判定为可能点了「添加」或切走了 App。直接点「分享」不展开时,应该不会触发推断,正好用来验证这一点。

怎么测
  1. 用 Safari 打开本页(微信等内置浏览器里没有「添加到主屏幕」)。
  2. 下方「标记」区先点一个标记,例如「准备点 …」,然后去操作 Safari 的菜单。每一步停留 2–3 秒再继续或取消。
  3. 回到页面看「分段统计」:每个标记之后出现了哪些信号(blur、hasFocus 变 false、rAF / 定时器停顿、视口变化…)。时间轴能看到停留期间的连续状态。
  4. 用「对照实验」里的 alert、分享、文件选择等已知会盖住页面的原生 UI 做对比。
  5. 测完点「复制结果」,把文本发给我,我帮你分析。日志会存在本地,刷新也不会丢。

标记

标记只是在日志里插一条分隔线,用来把操作分段。打开菜单后页面一般点不到,所以要先标记再操作。

能不能用点击唤起「添加到主屏幕」?

没有官方 API,这里把可能的路径逐个试一遍。每试完一个,底部会弹出问题让你记录面板里有没有「添加到主屏幕」,结果会进「复制结果」。

A. navigator.share() 换各种参数

对比 Safari 自己的分享面板:看面板底部的操作列表(View More 展开后)有没有 Add to Home Screen / Add Bookmark / Find on Page 这些 Safari 专属项。

B. 长按链接 → 分享…

长按我(链接指向本页)

长按后在菜单里选「分享…」,打开的是 Safari 自己的分享面板,但分享对象换成了这个链接。

C. 描述文件 Web Clip(Apple 配置描述文件)

流程:点「允许」下载 → 打开「设置」→ 顶部「已下载描述文件」→ 安装(需输入锁屏密码)→ 主屏幕出现图标 → 点图标打开,「安装 / 独立模式验证」会显示 via=mobileconfig。这条路肯定能装上,但描述文件没签名,会显示「未验证」,而且步骤比 Safari 自带的还多。测完可以在「设置 → 通用 → VPN 与设备管理」里删掉。

D. Web Install API

E. 从内置浏览器跳到 Safari

用 x-safari-https:// 打开本页

把链接发到微信或 QQ,在内置浏览器里点这个按钮,看能不能直接跳到 Safari。在 Safari 里点没有意义。

结果

时间轴

正常 异常(hidden / 失焦 / rAF 停) 空白=这段时间 JS 定时器没跑 标记 blur/focus 事件

分段统计 (本次会话,最新在上)

按出现先后排序;@+3.2s = 标记后 3.2 秒第一次出现。红色是「页面被盖住/失焦」类信号,灰色多半是滚动、工具栏伸缩带来的噪音(pointercancel 在手指开始滚动时也会触发)。

对照实验

这些是确定会盖住页面的原生 UI。每个按钮会先自动插入标记,再触发。

长按我(链接预览)

「新开标签页」会留下一个空白页,需要手动关掉再回来。「文件选择菜单」在 iOS 上弹出的菜单和 Safari 的「…」菜单是同一类原生菜单,可以重点对比。

安装 / 独立模式验证

IntersectionObserver v2 遮挡检测

目标元素

v2 只能发现页面里其他 DOM 元素造成的遮挡。可以在打开 Safari 菜单前后对比 isVisible 有没有变化(Safari 不支持的话一直是「不支持」)。

视口 / 工具栏数值 (每 0.5 秒刷新)

分别在 Safari 设置里切换「紧凑 / 底部 / 顶部」标签栏布局后刷新,看这些数值能不能区分布局。

环境检测

API 支持

事件日志