I'm trying to get rid of the address bar on the top of my web app when viewed on Chrome mobile.
I have "installed" it on Chrome Mobile by "Add to Home Screen". This gets rid of the "address" bar in a useless way - it replaces the address bar by an almost identical sized bar with the name of the web page, a big blank space where the address bar would be, and the three dots on the right to bring up a Chrome menu.
So now I've got almost the same problem. How do I get rid of this pseudo address bar? In this answer it mentions creating a link to a manifest. There is also documentation on this on Google's own documentation page, under "Chrome for Android" so I assume it should know what it's talking about and "just work".
My manifest looks like this:
{
"short_name": "Test",
"name": "My Test Web App",
"start_url": "/app/test",
"display": "standalone",
"orientation": "landscape"
}
However, I see absolutely no difference. In fact, when I look at the page in the developer tools, it doesn't even appear that the manifest is being used. I have confirmed there isn't a caching issue, as I see the correct tag in the HEAD of the source:
<link rel="manifest" href="/manifest.json">
This doesn't work either on HTTP or on HTTPS (although the cert has expired and I haven't gotten around to updating it yet). It also doesn't seem to work on Chrome on the desktop either.
Update: I updated Chrome Mobile from v87 to v89 and for some reason now it can see the manifest. I also managed to get landscape mode to work by removing the shortcut on the home screen and re-adding it. But it still shows the large title bar at the top of the screen.
