IOS全屏应用: why does toolbar appears when page changes?

Question

I inherited a React web app这意味着在 Safari IOS 中用作移动设备上的全屏应用程序。您可以通过执行以下操作使应用全屏显示并隐藏地址栏:

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

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

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

我看过的堆栈问题:

How do you keep an iPhone/iPad web app in full screen mode? -- 这个问题似乎是针对多页面应用程序的，建议的链接技巧不适用于使用 react-router-dom 跨页面导航的 React SPA。

我尝试过的事情:

我在网络应用程序上有以下元标记:

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

Answer 1

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

在 head 标签之间，我引用了 list 文件:<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"
    }
  ]
}

附言要清楚链接是react-router-dom链接，因此没有页面刷新。页面刷新问题导致浏览器栏在某些情况下出现，并且还有其他答案:该问题。