Friday View: HTML5 made easy by iOS7.1
Peter MareÅ¡, CTO at games developer Odobo, discusses the benefits for mobile developers hidden within Appleâs latest OS update
As the developer program for real-money gaming, we assess the impact that any new software update is likely to have on our developer community. The positive news with iOS 7.1 is that this version presents a great opportunity for all HTML5 game developers and full screen app producers.
The most exciting addition is a modification to how Safari handles web apps: it makes development easier, improves the look of games and enhances the player experience. Better still, it is easy to implement. By updating a small piece of code in our Game Development Kit (GDK), every game automatically updated to take advantage of these improvements.
In this article, we cover some iOS 7.0 history, prior solutions, and the future ahead with 7.1.
iOS 7.0 Safari: a brief history
In iOS 7.0, Mobile Safari hid the address bar and changed the behaviour of both full-screen browsing and full-screen mode. Although the idea behind full-screen browsing on iPhone was great, it was originally designed for scrollable webpages, not full-screen web apps such as media players and games. For gamers and developers this presented more of a challenge than with the previous version of iOS.
Although the changes impacted both device orientations, landscape presented the greatest need for a workaround: if a user tapped the top or bottom of the screen, the browser bars would activate, reducing the screen real estate, interrupting and obscuring the game or application. To complicate matters further, it was not possible to launch the game in full-screen mode.
iOS 7.0 Safari: a temporary solution
Since no browser event was fired when the browser bars appeared, workarounds had to poll the visible browser area for each frame (we used requestAnimationFrame). This identified when browser bars were both visible and unsought. Once detected, the content was resized to allow scrolling, disabled the app, and presented a âswipe upâ message to the user.
Once the user swiped up, the app would detect that the visible browser area had been increased, re-enabling and resizing the content back to full-screen.
This provided a solution; however, it was a messy hack.
On the design side, developers had to change their game design practices to avoid the top and bottom areas (each ~100px high) for any interactive elements to  prevent users from triggering the bars. While this reduced the frequency of which this feature occurred in apps, it still presented a user experience challenge.
To provide a more natural experience to players, we provided direct feedback to Apple in hopes of creating web app development extensions.
Safari – full-screen ahead
iOS 7.1 arrived with a little-publicised gem for every HTML5 developer: minimal-ui.
In the iOS 7.1 release notes, under Safari, you will find the following:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
For example, use <meta name=âviewportâ content=âwidth=1024, minimal-uiâ>.
This small addition literally changes the game. Simply adding minimal-ui to our viewportâs meta tag (something automatically handled by the GDK) now solves the challenges presented in iOS 7.0 with one easy step – and being native, it performs exceptionally well.
Now, running HTML5 full-screen apps on iOS 7.1 looks and feels great without the need for complicated workarounds sitting behind the UI.
Apple has also gone a step further and removed the âdead-zoneâ at the bottom of the display, which means that users can only activate the browser bars by tapping the top of the screen. When this happens, the bars appear, with a darkened overlay covering the app below. This provides the user with a true native feeling of being âout of the appâ. Simply tapping in the content space will intuitively bring back the full-screen app.
So whatever you feel about iOS 7.1 in general, for gaming enthusiasts and HTML5 developers, this new update is one weâre applauding.