iOS6 and Web Applications

During the first half of 2012 I worked on a project to enhance my JavaScript knowledge and to build something for myself. This project is called flibbble. My goal was to build a web application which feels like a native one on the latest iPhone.

At that point in time iPhone 5 was not released and there was no web inspector for iOS, but it was a lot of fun, because I have found that it is possible to write web applications with great performance. flibbble is a dribbble feed viewer which displays the latest shots without any application frame.

Browsing shots uses CSS 3D transforms and new shots are loaded via AJAX. Swiping to the right reveals navigation where users can select which feed they want to browse. Swiping to the left reveals additional information of the shot. Landscape mode displays the shot in original size and state is stored using localStorage.

The main challenge was to maintain a stable framerate for the flipping effect having a lot of images loaded. I rewrote the flipping effect multiple times and used Chrome’s developer tools to find bottlenecks in my code. To gain performance I dropped z-index and moved animations to CSS so that I just had to add or remove one class to animate the images. This lead to great performance with few images, but while browsing iOS’s memory filled up and performance decreased.

On iOS5 I was able to handle this problem by adding visibility: hidden to images which are covered and therefore not visible. This probably freed up memory and I could display up to 50 shots without performance issues.

#Disappointment

Having read lots of good things about iOS6 I looked forward to update my iPhone’s operating system and test flibbble. iOS5 had some rendering issues so I was excited to see them fixed and to try the new web inspector, but loading my app the first time on iOS6 was a huge disappointment. Images loaded way slower, performance dropped with more than 20 images and the app crashed when rotating to landscape mode. This was the moment I stopped working on this project.

How could an app which worked perfectly on iOS5 fail so hard on iOS6?

I searched for another way to free up memory on iOS6, but Apple’s documentation for web applications is dated and very limited. If you know a way to free up memory on iOS6 without removing elements from the DOM feel free to contact me. Having seen fastbook by Sencha I know that there seems to be a solution.

I have uploaded flibbble’s current source code to github and would appreciate if you have a look at it. The latest beta version is online on flibbble.com. There is no descriptive web page, but after adding the site to your homescreen it will load. For the final version I wanted to implement a better way to switch between users and a history of viewed shots, but I won’t release it until there is a way to gain the same performance on iOS6 as on iOS5.