How to Use Black Status Bars in iOS 7 Web Apps
Hi, I’m Kaz, Flinto’s engineer. This is my first post on the Flinto blog! A few people have asked how we were able to produce black status bars in Flinto prototypes that run on iOS 7.
Web apps in iOS have two states. They are either running in Mobile Safari or running as a standalone web app installed on the home screen. You can detect which state your app is in with Javascript using window.navigator.standalone. That value will be false if your app is running in Mobile Safari, and true if it is installed as a standalone web app.
While your web app is running in Mobile Safari (before it is installed as a standalone web app) set the status bar to "black-translucent" using the following meta tag.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
This way, your web app will be installed with the black-translucent status bar, which is actually a status bar with white text in iOS7. I know, it’s a confusing name—I assume Apple named it this way to maintain consistency from iOS 6 where this value produces a semi-translucent black background with white text.
When launched, your web app’s status bar will have white text and an entirely translucent background. However, I discovered that web apps actually start up with “black text” status bar at first, then immediately change to “white text” status bars due to the black-translucent meta tag.
So I thought, “What if I remove status bar meta tag right after web app is launched?” I tried, and it worked! That’s now what Flinto does to produce a status bar with black text.
Here’s the Javascript (and jQuery) code that does it.
if (window.navigator.standalone) {
$("meta[name='apple-mobile-web-app-status-bar-style']").remove();
}
Now you can produce a status bar with black text in your web apps. This solution is an undocumented workaround which may not work with future versions of iOS. I found this workaround accidentally and it seems to be working well in all my tests.