iOS全屏应用程序：为什么页面更改时会出现工具栏？

Question

我继承了一个 React Web 应用程序，该应用程序旨在用作 Safari IOS 移动设备上的全屏应用程序。您可以通过执行以下操作使应用程序全屏显示并隐藏地址栏：

1. 在 Safari 中打开应用程序 ( https://app.1wsq.com )
2. 点击底部工具栏上的按钮
3. “添加到主屏幕”

这会在主屏幕上添加一个图标，当您点击它时，它会全屏打开应用程序。但是，当您导航到网站上的另一个页面时，会出现以下工具栏：

这个工具栏不是普通的地址栏，它似乎是一个辅助工具栏。我不确定是什么导致它出现。

我看过的堆栈问题：

如何使 iPhone/iPad Web 应用程序保持全屏模式？-- 这个问题似乎是针对多页面应用程序，并且建议的链接技巧不适用于使用react-router-dom 进行跨页面导航的React SPA。

我尝试过的事情：

我的网络应用程序上有以下元标记：

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

Answer 1

该应用程序缺少manifest指示应用程序保持全屏模式的文件。

在头标签之间，我引用清单文件：<link rel="manifest" href="manifest.json" />然后创建一个manifest.json文件。

{
  "name": "1WSQ",
  "short_name": "1WSQ",
  "description": "1WSQ APP",
  "display": "fullscreen",
  "start_url": "/?homescreen=1",
  "background_color": "#000000",
  "theme_color": "#0f4a73",
  "icons": [
    {
      "src": "touch-icon-ipad-retina.png",
      "sizes": "167x167",
      "type": "image/png"
    }
  ]
}

PS 需要明确的是，链接是react-router-dom链接，因此没有页面刷新。页面刷新问题导致浏览器栏在某些情况下出现，并且还有其他答案：该问题。