Update 2014-02-25

Help request!

Hey folks.  I seem to get a fair amount of traffic to this page from Stack Overflow.  This is great, except that I haven’t updated this post in 3 years, so the data is woefully out of date.  It would be nice if developers that came here looking for this data weren’t given Firefox 4 Beta stats.  So if you’ve tested a current browser’s offline storage limit, post it as a comment and I’ll add it to the table.  If you want to help but don’t know how to test this, let me know.  If I get enough requests / find some time I’ll put together a testing page.

HTML5 Powered with CSS3 / Styling, Multimedia, and Offline & StorageI’ve been working on an HTML5 offline app for just over a year now.  Yes, the same app.  It hasn’t been dedicated time, but the development has dragged on for awhile now.  Primarily this has been due to the production of data (there’s a lot of data), though many delays have been caused by the developing spec and its idiosyncrasies across browsers.  So, I decided to write a multi-part series in what it’s taken to get this app out the door (which it isn’t yet, but by the time I finish this series it should be).

When all is said and done, this app should run on Windows, OS X (Mac), Linux, iOS (iPhone/iPad/iPod Touch) and Android.

This first part is just an introduction to what’s involved and will mostly be fluff.  The meat of it won’t start until part 2.

Application Background

The application is a language learning app (Thai).  It allows users to search in both English and Thai against a database of more than 10,000 records.  Some are individual words, some are sentences, some are short phrases or other word combinations.  Each record will have an associated audio file in both English and Thai that users can click to hear the word/phrase/sentence pronounced by a native speaker.  It supports multiple users, and each user can mark words/phrases/sentences as Favourites for quick access.  It also includes adult phrases, and so includes a content filter option to remove these phrases from the results if desired.

Additionally, this particular application has different sections for Categories, Classifiers and Grammar.  I won’t necessarily go into all of the application’s functionality in this series, but I will go into any functionality that wasn’t easily achieved using old-school JS (i.e. pre-HTML5).

Learning Experiences

Application Cache (AppCache) Offline Storage Limits

Offline storage is nowhere near consistent across browsers.  This particular application requires (or will when all the audio is recorded) somewhere between 150 MB – 300 MB of storage.  At the time of this writing (and my testing) the following holds true:

Browser Application Cache (AppCache) Storage Limit
Safari Desktop (Mac & Win) Unlimited
Safari Mobile (iOS) 10 MB
Chrome Desktop (Mac & Win) 5 MB *
Chrome Mobile (Android) Unlimited **
Firefox 4 Beta Unlimited (with user prompt)
IE No idea. It sucks. ***

* Chrome only allows a limited amount of storage UNLESS you jump through some hoops. More on that later.

** Android appears to allow unlimited storage, at least with the 2.3 API/emulator. However it continually errored out after 1092 files when I had more than that in a particular directory.

*** IE just plain sucks. I have no idea how much storage it allows because it loads my JS files out of order it doesn’t load some of my JS files because they have type=”application/x-javascript”, so pretty much everything breaks. I still hate IE.

Just think about this for a second.  Safari’s desktop browser offers unlimited storage, but their mobile doesn’t.  Chrome is the opposite – their desktop browser limits storage, but their mobile browser offers unlimited.  What a PITA.

So, with > 150 MB to be deployed I ran into a bit of a conundrum.  The app was originally designed for Safari only, but when Chrome and Firefox started showing promise, the sponsor wanted to extend the scope.  Well, Firefox (beta right now, but I’m sure it’ll be release soon) and Safari are no problem.  But Chrome bit me in the ass when I started testing with extreme amounts of data.  Also, what about Safari Mobile?  Didn’t Steve Jobs, for 2 versions of the iPhone, refuse to allow native apps, saying that the web was where it’s at?  Well, if that’s the case, why tie my hands and limit me to 10 MB of local storage??  Oh ya, it’s because he released the App Store so now I have to pay and go through a Draconian authorization process if I want more than 10 MB of storage.  Nice.

Templating (or basic MVC)

Since the original application was only targeting the desktop, I did what most people do with JavaScript and mixed presentation with logic.  I tried to keep them mostly separated, but inevitably I ended up returning formatted HTML strings in functions where it might be better to simply return an array or an object.  This is especially true now that I’m dealing with at least two different UIs for the same application – desktop and mobile.  And that might grow again if separate, native-feeling iOS and Android versions are required.

If I were to start over, I’d probably use something like PURE.  Hell, when I started this project I didn’t even realize that JS templating frameworks existed.  Now, however, it’s a little too late to dig into this (next time).  I will however detail the road that I’ve started down in order to separate presentation from logic.

In part 2 I’ll go into laying the foundation, including a few things that I didn’t do but should have (and now have to revisit because I didn’t).  Stay tuned.

View the rest of the series.