PWA - iOS change Status Bar color

Question

Is it possible to change the color of the Status Bar in a Progressive Web App on iOS 11.3 Beta 6? Tried to change the HEX Code of background_color and theme_color in the manifest.json file but I couldn't achieve any changes.

Answer 1

Well you could use the

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

To make the status bar transparent (not invisible) and use a div behind the status bar of whatever color that you like. Framework 7 does this by allowing you to change the color of

<div class="statusbar" />

for a custom ios status bar. Of a side note you may also need the meta view port tag properly added in the head as well. E.g.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

This tag is not needed for the status bar, but for using a splash or loading screen. A user on medium did an article for setting up the splash screen.

<meta name="apple-mobile-web-app-capable" content="yes">

Also, as apple has limited support for the manifest file & has changed their pwa support in the past, these tags may eventually become deprecated and they may end up using the manifest.json file properly.