Android 操作系统导航栏和状态栏在全屏 PWA 上切换

svi*_*gen 11 android progressive-web-apps

我的 PWA"display": "fullscreen"最近开始出现异常行为。Android 导航栏和状态栏在游戏过程中不断重新出现。应用程序仍然fullscreen正常启动,但每个触摸事件都会短暂地重新显示操作系统底部导航和顶部状态栏(正如您通常在standalone显示屏中看到的那样)。

我不认为这与我的任何代码更改有关,因为我的一些旧的、未受影响的 PWA 最近也开始出现这样的行为。

我使用的是 Pixel 5,Android 11,上次更新是在上周。

这是显示该问题的短片。

Tom*_*hen 7

我正在调查ArcoMage HD ( GitHub )的同一问题,这是我的一款开源 React 卡牌游戏。

该问题似乎是由 Android 和 Android Chrome 的某些最新版本(可能是在 2021 年 8 月或之前不久)引入的(如果您使用最新的 Chrome + 旧的 Android,那就没问题了)。

这种非常烦人的、类似错误的行为使得"display": "fullscreen"完全无法使用,因为当用户想要单击链接/按钮时,他必须双击链接/按钮!- 第一次点击无法触发链接/按钮的点击,只能出现导航栏和状态栏,那么用户必须立即第二次点击该链接/按钮,这次触发点击或触摸事件。

在 Android/Chrome 修复此问题之前,PWA 开发人员可以做的临时修复是:使用"display": "standalone",然后在某处放置一个“切换全屏”按钮(使用 Fullscreen API),或者检查window.matchMedia("(display-mode: standalone)").matches它是否true(意味着它是 PWA),然后制作一个覆盖整个页面的透明按钮,当用户单击页面上的任意位置时,他实际上单击了该按钮,该按钮请求全屏模式并删除自身。

(以前我以为我们可以"display": "fullscreen"在应用程序加载时使用API​​​​然后进入全屏模式。不幸的是,Chrome需要用户手势才能进入全屏)

对于全屏切换,您可以使用此代码片段,或者如果您想要更好的兼容性,则可以使用screenfull.js

PS Chromium 问题页面: https://bugs.chromium.org/p/chromium/issues/detail ?id=1232956

好消息:它已在 Chrome 95.0.4637.0 中修复,未来几天将在 Canary(不稳定版本)上提供(我们可能需要等待稳定版本来修复它)

10 月 23 日编辑:Chrome(适用于 Android)稳定版本现在为 95.x