How to hide the Google Chrome status bar on a website

Question

I have noticed the movement towards Progressive Web Apps (PWAs), so I'm trying to learn what they're all about.

In most PWA's, I see that the browser chrome is hidden (the URL bar, the back button, home button, search fields, etc.). I'm trying to figure out how this is done.

I'm trying to build a new PWA from scratch and have, tried this so far:

 var hideNav = 'location=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes'; window.open('test.html', 'null', hideNav); 

That is what I wrote in my test.html file. This works when I view the app on Desktop, but it doesn't work on Mobile.

(I recently migrated from an android developer to a web developer, so I don't know languages like JavaScript and PHP as well as Java.)

Answer 1

You can do so through the Web App Manifest . Here a really good article from the Google Developers site about it.

The Web App Manifest allows developers to control how their apps appear when they are added to the homescreen (another PWA feature). In your specific need, you'd be looking to customize the display type from the Web App Manifest. You can read more about it in the linked article.