Transparent Bottom Navigation Bar

[denaszune]

It would be nice to be able to set the bottom navigation bar on an operating system such as Android to transparent. It would make the PWA feel more at home / native.

[alancutter]

Could you post a screenshot showing this navigation bar for clarity?

[denaszune]

Here is a link to a tweet with a GIF that shows an Android App that supports a transparent navigation bar.

https://twitter.com/davey_burke/status/1126878112170405888?s=20

Here is what a PWA in normal circumstances looks like on my phone.

[NotWoods]

Personally I think this is better as something the browser handles, like the notch safe area. It should be something all sites benefit from rather than a separate opt-in.

[denaszune]

That makes a lot of sense to me. Would this issue need to be moved somewhere else if it is not specific to the manifest?

[Malvoz]

@denaszune https://github.com/w3c/csswg-drafts/

[andreeaid]

@denaszune How did you set your status bar to be orange at all? I am having a problem with my PWA; I can't figure out if there is a way to change the status/nav bars' colors at all. I set them to black but the status bar stays gray and the bottom bar is a random blue color. I set he theme-color attribute in both my index.html and in the manifest to #000000, but nothing. Let me know if you are able to help.

[denaszune]

@andreeaid I'm looking at this from my Pixel 3 so I can't speak for all devices. However it is possible it's a bug or Chrome was updated to remove that functionality. I checked my personal PWA and the PWA from the screenshot above (https://squoosh.app/) (both installed on homescreen). Both are showing gray status bars. They used to be green and orange. I also have squoosh installed on my desktop windows pc and it is still showing an orange top bar like it used to.

As for the bottom navigation bar I'm not sure how you are getting a blue color. Mine has always been black like the screenshot above and it is still black today. I don't think there is a way to change it unfortunately. That's why I wanted to make it transparent so I could change its color via an html element.

[andreeaid]

Thank you so much for answering, I have a Pixel 3 XL which I guess is why it is showing a gray status bar as well. I guess I can stop pulling my hair out now, knowing it's a universal issue. Thanks again.

[toniengelhardt]

This really compromises PWA experience on Android. One of the few cases where iOS is a step ahead.

[christianliebel]

This really compromises PWA experience on Android. One of the few cases where iOS is a step ahead.

@toniengelhardt I received similar feedback. As it's Android-related, this should go to the Chromium bug tracker. I found a similar issue here, maybe you want to add your feedback there too: https://bugs.chromium.org/p/chromium/issues/detail?id=797527#c68

[rejhgadellaa]

Also related issues on chromium bug tracker:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1235180
• https://bugs.chromium.org/p/chromium/issues/detail?id=1001394

This issue / feature request has been open for a while, not much action from the Chrome team unfortunately :(

[userofit123]

I am facing an odd situation in relation to this.
I have 2 websites, both are PWA and both are uploaded as apps to google play.

When they are installed through the "Add to homescreen" button, they both have a black bottom nav bar in dark mode. Great and as expected.

When I install app #1 from the play store, it aso has a black nav bar, as expected.

But, app #2, when installed from the play store, has a white nav bar, even in dark mode.

All of the settings are exactly the same between the two apps. App #2, when installed from the add to homescreen button does have a black nav bar, but the same app from google play has a white nav bar.

[aarongustafson]

@userofit123 Hard to diagnose without seeing your manifests, but seeing as this is only tangentially related to the big, hit me up via email. I'm “aarongu” and I work for Microsoft, so you can probably figure out my email from that.

[marcoscaceres]

Sounds like this is an Android issue with related bugs filed, so closing.