IOS Full Screen App: why does toolbar appears when page changes?

Question

I inherited a React web app that is meant to be used as a full screen app on mobile devices in Safari IOS. You can make the app full screen and hide the address bar by doing the following:

Open the app in safari (https://app.1wsq.com)
Tap button on bottom toolbar
"Add to Home Screen"

This adds an icon on the home screen and when you tap it it opens the app in full screen. However, when you navigate to another page on the site the following toolbar appears:

This toolbar is not the normal address bar, it seems to be an accessibility toolbar. I am not sure what is causing it to appear.

Stack question I have looked at:

How do you keep an iPhone/iPad web app in full screen mode? -- This question seems to be geared toward a multi-page application and the suggested hacks for the links doesn't apply to a React SPA that uses react-router-dom for navigating across pages.

Things I have tried:

I have the following meta tag on the web app:

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

Joel Hoelting Joel Hoelting · Accepted Answer · 2020-07-17T17:31:15

The app was missing a manifest file to instruct the app to remain in full screen mode.

In between the head tags I reference the manifest file: <link rel="manifest" href="manifest.json" /> and then create a manifest.json file.

{
  "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"
    }
  ]
}

P.S. To be clear the links are react-router-dom links so there is no page refresh. The page refresh issue causes the browser bar to appear in some cases and there are other answers re: that issue.

IOS Full Screen App: why does toolbar appears when page changes?

1 Answers