Hide address bar in Progressive Web Applications
I'm developing a PWA with VueJS. I started testing my application in real devices (Add to home screen). My application is intended to be 100% height, as it displays a map as you can see:
It seems that sometimes, transitions that appear from outside the viewport height, makes the address bar appear at the top of the page. For a PWA, I think this behaviour makes the app feel less native, and also, breaks my design (The button at bottom center and the whole map container are not visible unless the user close manually the address bar).
I tried some things I've seen in other questions:
window.scrollTo(0, 1);<meta name="mobile-web-app-capable" content="yes">- from here.
I don't care if the app does not hide the address bar when visited in a web browser. But at least I want the address bar hidden when the app is launched as a "native" app (added to home screen).
I also tried changing display property in the manifest.json from standalone to fullscreen with no luck.
I know I could change the css for my button and map in order to make them "visible" when the address bar is visible, but as I said, this makes feel the app less native IMO.
Is there a solution for hidding permanently the address bar? Is it possible or it is something I have to consider in my design?
Answer
PWA app shows the address bar when you try to navigate the pages outside of scope. For example if you have set your scope in manifest.json file as scope: "/my-pwa/" then all the page url should have prefix like this: /my-pwa/page.html.