Set window.navigator.standalone to true and respect apple-mobile-web-app-status-bar-style.

[binki]

iOS lets you bookmark webapps as fullscreen. It respects the meta elements with names apple-mobile-web-app-capable and apple-mobile-web-app-status-bar-style. When an app is marked as apple-mobile-web-app-capable, bookmarking the app to the homescreen enables it to be launched in fullscreen mode. When the app is run in fullscreen mode, window.navigator.standalone is set to true. And, based onapple-mobile-web-app-status-bar-style`, the status bar is either hidden (allowing the webapp to paint its own colorful status bars) or displayed, depending on what the user specified.

It’d be nice if Web Interface could emulate this behavior. At the very least, if it could set window.navigator.standalone, then my code can easily detect that it is being run as a fullscreen app. My app, when it sees this, assumes that apple-mobile-web-app-status-bar-style is being respected (I have it set to black-translucent) and then enables custom drawing of the iOS statusbar. Though, to support the most webapps which inspect window.navigator.standalone, it’d be best to also add support for toggling the statusbar on/off through apple-mobile-web-app-status-bar-style at the same time.

With the current Web Interface app, the system statusbar is not drawn and this results in the statusbar being drawn over the web content. Simpler web applications might not want to account for drawing the status bar. More advanced web apps which can draw the bar would want to only do so when window.navigator.standalone is true.

I’ve compared how my app draws with the homescreen bookmark versus Web Interface here. It’s not that big of an issue, but I’d rather this be fixed in Web Interface than write more Web Interface-specific code in my app ;-).