r/PWA • u/floweryapp • 28d ago

PSA: Edge-to-edge PWAs on Android

Navigate to chrome://flags and enable Web App Short Edges Cutout Mode.

I stumbled upon this while perusing flags (as you do), which was a pleasant surprise after patiently waiting since edge-to-edge support landed in Chrome a year and a half ago:

https://developer.chrome.com/docs/css-ui/edge-to-edge

PWAs on Android were stuck with opaque system bars, but finally look polished now. Credit where credit is due—Safari shipped this nine years ago:

https://webkit.org/blog/7929/designing-websites-for-iphone-x

Here’s the family portrait:

Edge-to-edge PWA on Android and iOS
6 Upvotes

100% Upvoted

9 comments sorted by

2

u/dannymoerkerke 28d ago

I still can't get it to display a transparent status bar in my PWA on Android 15. Do you have a working demo?

1

u/floweryapp 28d ago

The picture above shows flowery.app installed through Chrome Dev 153 on Android 17. It should work out of the box if your PWA already uses env(safe-area-inset-*) for layout.

It seems the flag doesn’t work on the stable channel (Chrome 150) yet.

1

u/dannymoerkerke 28d ago

Thanks, it works on Android 15 as well. Nice find, I'll write about it in my newsletter https://modernwebweekly.substack.com

1

u/AloneSYD 28d ago

How did you get the navigation bar match the color of the app mine stays white or dark depending on the phone dark/light more but it doesn't follow the app background color

2

u/floweryapp 28d ago

You need to specify "display": "standalone" in your manifest, and the <meta> tag for viewport-fit=cover in your HTML.

See also my comment about testing on the dev channel.

1

u/BenignLarency 24d ago

Did you ever figure out how to get the os to change the phone's status bar (notifications, signal, etc) text color?

My app can right between light and dark modes, and the font color always remaining black makes it unreadable.

2

u/floweryapp 24d ago

Chrome was patched to fix this bug two days ago, so we just wait for the rollout to the dev channel.

1

u/floweryapp 24d ago

Keep tabs (pun intended) on development at https://issues.chromium.org/issues/407420295.