Android OS 导航和状态栏在全屏 PWA 上切换进出

Question

我的 PWA 与 "display": "fullscreen" 最近开始行为不端。 Android 导航栏和状态栏在播放过程中不断重新出现。应用程序仍在 fullscreen 中启动通常，但每个触摸事件都会短暂地重新显示操作系统底部导航栏和顶部状态栏(正如您通常会在 standalone 显示中看到的那样)。
我不相信这与我的任何代码更改有关，因为我的一些旧的、未受影响的 PWA 最近也开始表现得像这样。
我使用的是 Pixel 5，Android 11，最近一次更新是在上周。
这是 short clip显示问题。

Answer 1

我正在调查 same issue的 ArcoMage HD ( GitHub )，我的一个开源 React 纸牌游戏。
这个问题似乎是由 Android 和 Android Chrome 的一些最新版本(可能在 2021 年 8 月或之前不久)引入的(如果您使用最新的 Chrome + 旧的 Android 就可以了)。
这种非常烦人的类似错误的行为使 "display": "fullscreen"完全无法使用，因为当用户想要单击链接/按钮时，他将不得不 双击 链接/按钮! - 第一次点击不能触发链接/按钮的点击，只能出现导航栏和状态栏，然后用户必须立即第二次点击链接/按钮，这一次触发点击或触摸事件。
在 Android/Chrome 修复此问题之前，PWA 开发人员可以做的临时修复是:使用 "display": "standalone" ，然后在某处放置一个“切换全屏”按钮(使用全屏 API)，或检查 window.matchMedia("(display-mode: standalone)").matches如果是 true (意思是PWA)然后制作一个覆盖整个页面的透明按钮，当用户点击页面上的任意位置时，他实际上点击了该按钮，该按钮请求全屏模式并自行删除。
(以前我以为我们可以使用 "display": "fullscreen" 然后在加载应用程序时使用 API 进入全屏模式。不幸的是，Chrome requires 是一个用户手势进入全屏)
对于全屏切换，您可以使用 this snippet , 或 screenfull.js如果你想要更好的兼容性。
附言 Chrome 问题页面:
https://bugs.chromium.org/p/chromium/issues/detail?id=1232956
好消息:它是 fixed在 Chrome 95.0.4637.0 中，它将在接下来的几天内在 Canary(不稳定版本)上可用(我们可能需要等待更长时间才能让稳定版本修复它)
10 月 23 日编辑:Chrome (for Android) 稳定版现在是 95.x