Issue description
Running a MobileWeb app on an iOS device and send it to the home screen ("Add to home screen" option on Safari) gets a black bar on the top of the screen instead of the standard status bar of iOS.
Steps to replicate
This issue happens only if you launch a mobile web app.
Create New Mobile App Project (From Classic available templates choose HTML-Based Application).
Compile/build the app.
Access to it from Mobile Safari on an iPhone/iPad (it can be replicated on simulators also).
Press the "Share" button and then press "Add to Home Screen".
Using the app icon that was added to the home screen, launch the app.
Observe the status bar, it's completely black.
Adding meta tags into "Project/Resources/HTML/index.html" for modify Status Bar appearance and App capability does not seem to work (look please at screenshots attached, for reference).
Specs quoted
{quote}
Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode. For example, the following HTML displays web content using standalone mode.
{quote}
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
{quote}
For more on status bar appearance, see “apple-mobile-web-app-status-bar-style” in Safari HTML Reference.
{quote}
-
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1
Here's my findings: "apple-mobile-web-app-status-bar-style" can only be "default", "black", or "black-translucent". "default" and "black" are essentially the same thing. On iOS 7 and newer, "default" renders a black bar with black text. "black" renders a black bar with white text. "black-translucent" will render a clear background with white text and the web app contents renders directly under the status bar text. This means we need to add 20 pixels of padding at the top. Also, there's no way to change the text color to anything other than white, so you'll want the background dark anyways. To make things worse, there's no way to say use the "black-translucent" for iOS 7 and "default" for iOS 6. So, the best solution here is to replace "default" with "black". This way things will behave essentially the same across all iOS versions.
Master pull request: https://github.com/appcelerator/titanium_mobile/pull/5555 3_2_X_hybrid pull request: https://github.com/appcelerator/titanium_mobile/pull/5556
Tested the fix with: Appcelerator Studio, build: 3.2.3.201404162038 Titanium SDK, build 3.3.0.v20140418162516 Node.JS Version: v0.10.13 NPM Version: 1.3.2 ├── acs@1.0.14 ├── alloy@1.3.1 ├── node-appc@0.2.0 ├── npm@1.3.2 ├── titanium@3.2.3-beta2 └── titanium-code-processor@1.1.1-beta1 XCode Version: 5.1.1 Device: iPhone 5S iOS 7.1