Masquer la barre d'adresse dans les applications Web progressives
Je développe un PWA avec VueJS. J'ai commencé à tester mon application sur des appareils réels (Ajouter à l'écran d'accueil). Mon application est conçue pour être à 100% en hauteur, car elle affiche une carte comme vous pouvez le voir:
Il semble que parfois, les transitions qui apparaissent de l'extérieur de la hauteur de la fenêtre d'affichage, font apparaître la barre d'adresse en haut de la page. Pour un PWA, je pense que ce comportement rend l'application moins native et brise également ma conception (le bouton en bas au centre et l'ensemble du conteneur de carte ne sont visibles que si l'utilisateur ferme manuellement la barre d'adresse).
J'ai essayé certaines choses que j'ai vues dans d'autres questions:
window.scrollTo(0, 1);<meta name="mobile-web-app-capable" content="yes">- de ici .
Je me fiche que l'application ne cache pas la barre d'adresse lorsqu'elle est visitée dans un navigateur Web. Mais au moins, je veux que la barre d'adresse soit cachée lorsque l'application est lancée en tant qu'application "native" (ajoutée à l'écran d'accueil).
J'ai également essayé de modifier la propriété display dans la manifest.json de standalone à fullscreen sans chance.
Je sais que je pourrais changer le CSS de mon bouton et de ma carte afin de les rendre "visibles" lorsque la barre d'adresse est visible, mais comme je l'ai dit, cela fait que l'application est moins native IMO.
Existe-t-il une solution pour masquer définitivement la barre d'adresse? Est-ce possible ou est-ce quelque chose que je dois considérer dans ma conception?
L'application PWA affiche la barre d'adresse lorsque vous essayez de parcourir les pages en dehors de scope. Par exemple, si vous avez défini votre portée dans le fichier manifest.json comme scope: "/my-pwa/" alors toute l'url de la page doit avoir un préfixe comme celui-ci: /my-pwa/page.html.