Tuesday, May 3, 2011

iOS and Application Cache

Background
As I have mentioned before, I started immersing myself in HTML 5 in order to provide a good, cross-platform mobile solution for a product that I have been working with. A critical selling point for this tool is the capability for it to work offline after downloading all the needed content once and the true targeted device for this is the first generation iPad. While developing to target the iPad, it would have been silly to write a web app and not make it cross-platform compatible with devices like the increasingly popular Android platform or really anything that supports the subset of HTML5 features I am using.

In writing applications that are cross-platform, there are always nuances that you must be aware of. For instance, my application uses but does not rely solely upon touch gestures because not all platforms (past BlackBerry models and such) that are mobile also support touchscreen interfaces.Another example, and one that I am not currently implementing, is geolocation whereas not all devices have that available (or will authorize its use).

Application Cache
Almost nothing could attract me to use the HTML5 web application as the development path over native applications except for the implementation of application cache. This little subset allows for the offline storage of your entire web application (html, images, javascript, etc). To implement it is really simple, too, which is what really attracted me to it.

Because there are already some great resources out there for implementing this, I will simply provide some links to those resources that I most appreciate here:
Dive Into HTML5 - Great resource, but caters more to Apache web server
The CSS Ninja - Another great resource including steps for IIS web server

Platform Nuances
My application, in its simplest state, operates as an image viewer. The images, however, are very "busy" and large in size especially when bundled together in albums. This wouldn't normally matter except that application cache is inconsistently implemented with regard to limits on storage. For example (and only accurate as of this writing) Safari on the Mac will store whatever you throw at it. Mobile Safari (on iOS devices), however, prompt you to increase your storage space at regular megabyte intervals (5, 10, 25, etc). Android devices let you store whatever you throw at it. Internet Explorer on the PC doesn't support application cache even as of IE 9. Chrome on the PC supports up to 5 MB of storage but nothing above that; attempting to store above that causes nothing at all to store (per the spec). The good news is that you can test for all of these cases, but the targets are ever-shifting. No big surprise there, but it is certainly worth noting that these are the perils you face when going cross-platform.

Recently I noticed a specific behavior on iOS devices when I finally surpassed the 5 MB initial threshold for the app. When the pop up window asked to increase storage, I presumed (incorrectly) that the system would be smart enough to expand the storage and then stuff the content in there. If you ask me, that seems like no real leap of faith to believe that. However, that action currently triggers an error on the application cache javascript object and does not store any of what has already been downloaded in the cache. That means that you have to handle the error (not really an error at all), make sure that it is an "OK" error based on the device type, and then force a refresh of the page to re-initiate the caching.

The good news: it is all doable and has been handled in my application easily and peace in the (current) mobile world has been maintained. If anyone should have interest in the code or more specific examples, feel free to comment or email and I will be happy to provide them.
Post a Comment

About Me

My photo

Firecracker, father, friend. Honorable, humorist, heathen. Performer, programmer, producer. Seeking, social, sarcastic. Loyal, logical, lasting. Bold, belying, benevolent. Gamer, genuine, grinning. Reader, redeeming, ridiculous.

On and off blogger, film producer, and programmer. Keurig addict. Frequent moviegoer. 

Voice Comments