I’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.
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).
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
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)
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.