TransWikia.com

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

Stack Overflow Asked by Joel Hoelting on November 22, 2021

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:

  1. Open the app in safari (https://app.1wsq.com)
  2. Tap button on bottom toolbar
  3. "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:

enter image description here

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">

One Answer

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.

Answered by Joel Hoelting on November 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP