22 October 2015

A Fix for Status Bars in iOS 9

In 2010, Kaz and I attended the WWDC keynote address where Steve Jobs introduced the iPhone 4. One moment that I was particularly excited about was when Steve explained emphatically that Apple supported two platforms for development: HTML5 and native apps in the App Store. "We are behind this 100%" Steve said of Apple’s support for HTML5.

Steve Jobs explains the two platforms supported on iOS, HTML 5 and native apps.

That was great news for me as a web developer, and when I started building Flinto.com, I took full advantage of it. One of the great things Apple did with iOS was to allow for standalone web apps. The ability to install a web app meant you truly could build something that really felt like an app using HTML5. These apps could be installed on the home screen and display in full-screen outside of Safari. Flinto.com has always delivered prototypes in the form of standalone web apps.

Unfortunately, support for standalone web apps has gotten progressively worse in the past few versions of iOS. I fear Apple has forgotten about them. In iOS 9, it has gotten particularly bad and the biggest problem visible to our customers is the lack of customization of the status bar. In iOS 9, it’s not possible to customize the status bar, it always shows up as black text on an opaque white background, which is rarely what designers intend.

Left: status bars as they appear in iOS 9. Right: The intended status bar style.

Our Solution

We recently released an iOS app intended for viewing prototypes made with our new tool, Flinto for Mac. We’ve concluded that the only way to get proper support for status bars is to display prototypes made in Flinto.com using the native viewer app we built for Flinto for Mac. Fortunately, iOS 9 introduced a deep link feature which makes this quite seamless. We’ve built this in the cleanest possible way to avoid any trouble adopting this workaround.

First of all, prototypes can still be installed in the usual way. Just know that the status bar will look wrong in iOS 9. If you tap an install link on an iPhone that has our Flinto viewer app installed, the link will open directly in the app and show up correctly. The prototype will also be saved within the app. It’s a bit easier than the old installation process. The only tradeoff is that you won’t see your app icon on the home screen.

An update to our viewer app is available today as part of our Flinto for Mac 1.1 release. This version supports the new deep linking feature.