Application plein écran IOS : pourquoi la barre d'outils apparaît-elle lorsque la page change?

Question

J'ai hérité d'une application web React destinée à être utilisée en plein écran sur des appareils mobiles sous Safari IOS. Vous pouvez rendre l'application en plein écran et cacher la barre d'adresse en suivant ces étapes :

1. Ouvrez l'application dans Safari (https://app.1wsq.com)
2. Appuyez sur le bouton dans la barre d'outils inférieure
3. "Ajouter à l'écran d'accueil"

Cela ajoute une icône sur l'écran d'accueil et lorsque vous appuyez dessus, cela ouvre l'application en plein écran. Cependant, lorsque vous naviguez vers une autre page du site, la barre d'outils suivante apparaît :

Cette barre d'outils n'est pas la barre d'adresse normale, elle semble être une barre d'accessibilité. Je ne sais pas pourquoi elle apparaît.

Question sur Stack que j'ai consultée :

Comment garder une application web iPhone/iPad en mode plein écran ? -- Cette question semble être axée sur une application multi-pages et les astuces suggérées pour les liens ne s'appliquent pas à une application React SPA qui utilise react-router-dom pour naviguer entre les pages.

Les choses que j'ai essayées :

J'ai la balise meta suivante sur l'application web :

Answer 1

L'application manquait d'un fichier manifest pour indiquer à l'application de rester en mode plein écran.

Entre les balises head, je fais référence au fichier manifest : puis je crée un fichier 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"
    }
  ]
}

P.S. Pour être clair, les liens sont des liens react-router-dom donc il n'y a pas de rafraîchissement de la page. Le problème de rafraîchissement de la page fait apparaître la barre du navigateur dans certains cas et il y a d'autres réponses concernant ce problème.