Building Offline Mobile HTML5 apps
Recently, at the Base Lab Hackathon, I’ve been playing around with building a mobile app in HTML5 with offline support. There’s a lot of material on the subject scattered all over the web. I wanted a single place where I could find all this information, to I wrote everyting down with links, and here it is.
I also built a demo which supports everything I write about in this post. You can see it working at http://marcinbunsch.github.io/offline-mobile-html5-demo/ and the source code is available here. Make sure you view it on a mobile and use “Add to home screen” feature for best experience.
Pack light
An ideal mobile app is fast and snappy. Lowering the number of resources will dramatically improve the first load experience. Afterwards, it will use cache, but you only make a first impression once.
As much as I love jQuery, zepto.js is a much better alternative for mobile HTML5 apps. It’s 9kb gzipped and has a largely jQuery-compatible API.
Don’t bring in Bootstrap. It’s huge and you most likely won’t use most of it (see Addy Osmani’s presentation on CSS Performance Tooling). Either use something smaller, like Pure and Picnic, or roll your own. You’re on a much smaller screen, with less clutter - you need less boilerplate.
Continue reading >