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

Question

我使用 "display": "fullscreen" 的 PWA 最近开始出现问题。 Android 导航栏和状态栏在播放过程中不断重新出现。应用程序仍然在fullscreen 中正常启动，但每次触摸事件都会短暂重新显示操作系统底部导航和顶部状态栏（正如您通常在standalone 显示中看到的那样）。

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

我使用的是 Pixel 5，Android 11，最近一次更新是在上周。

这是一个 short clip 显示问题。

Answer 1

我正在研究 ArcoMage HD (GitHub) 的 same issue，这是我的一个开源 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。

附：铬问题页面： https://bugs.chromium.org/p/chromium/issues/detail?id=1232956

好消息：Chrome 95.0.4637.0 中的 fixed 将在接下来的几天内在 Canary（不稳定版本）上可用（我们可能需要再等一段时间才能获得稳定版本修复它）

10 月 23 日编辑：Chrome（Android 版）稳定版现在是 95.x

Answer 2

我认为这可能是您的问题：

每次注册点击时，都会重置显示标志。您需要在每次重置/点击时设置标志，使其保持全屏显示。当点击发生时，可以通过 UI 可见性事件来处理以重置标志。

来自 google 的 Thiese 指南可能会对您有所帮助：

https://developer.android.com/training/system-ui/visibility

https://developer.android.com/training/system-ui/navigation#java

Answer 3

大多数答案是 Java 和 Kotlin，Javascript 有点棘手，您可以将其应用于几乎任何 JS 风格/超集。我正在使用独立并隐藏浏览器的控件

• some info on the different display modes 更多关于如何在控件下方显示using safe mode css style。

我认为问题是你有fullscreen，它不起作用，你需要独立的"display": "standalone"

1. 首先检测 PWA 是否在我们的应用程序中以独立模式运行，如下所示：

// on iOS Safari
window.navigator.standalone

// on Android Chrome 
// this is key for you..
window.matchMedia(
  '(display-mode: standalone)'
).matches

---

1. 鉴于各种平台，我建议在您的manifest.json 中定义一个start_url，从长远来看它将为您节省:)

2. 然后在fullscreen 和remove native controls 中都显示，添加值为standalone 的显示属性（全屏不起作用）。你的manifest 应该是这样的：

// manifest.json
{
  "name": "Tykt.org App",
  "display": "standalone",
  "start_url": "/?standalone=true"
}

---

确保您的viewport-fit=cover 在里面：

<meta name="viewport"
    content="width=device-width; initial-scale=1; viewport-fit=cover">

---

4. 添加支持移动网络应用和状态栏样式的元标记：

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Bonus if you want some translucency, for e.g. try default, black or black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style"
    content="black-translucent">