Webapp hide Android navigation bar (virtual back, homescreen etc. buttons) in Chrome (via javascript)

Question

I am making a webapp and would like to create a true fullscreen experience. For Android this includes hiding both the Chrome address bar on top and the navigation bar at the bottom (the virtual back, home and multitask buttons).

I have looked through the fullscreen api, fulscreen experiences article and screenfull.js. All of these implement hiding the Chrome address bar, but not the navigation bar at the bottom. (They do however hide it in some other browsers, like Opera.) I've tested this on Xiaomi mi A2 and Galaxy S8.

There must be a way to achieve this (at least it certainly is for a video element), because fullscreen mode on both YouTube and PornHub are able to hide this menu entirely.

Answer 1

Use a webmanifest. Put this inside a file:

Click to copy

{
   "display": "fullscreen"
}

Then add in the head of your HTML:

Click to copy

<link rel="manifest" href="/manifest.webmanifest">

Check this link for all possible methods: https://developer.mozilla.org/en-US/docs/Web/Manifest

Answer 2

Bit late to the party, but hopefully it still helps.

The requestFullscreen() method of the Fullscreen API accepts an optional options object.

Click to copy

document.documentElement.requestFullscreen({ navigationUI: 'hide' });

This should do the trick.