Making Offline Websites Using HTML5

Problems with trying to use HTML to make websites that work without internet access
May 2012

While it's possible to make an offline website using html5, it's a huge pain for the developer. HTML5 supports a few pieces which together let you (the developer) make offline websites. Note that there is no way for the user to take websites and make them work offline -- the support MUST be provided by the developer. Here are the provided pieces:

  1. Fine-grained caching control via a manifest file that tells the browser which elements to cache and how they relate to the networked versions. Read more here. This must be updated whenever any file changes.
  2. A local database engine that you can use. Unfortunately, the browsers don't agree on a standard yet, so it's between IndexedDB and SQL Storage. Both are quite similar in functionality, but (of course) differ on the details. A nice overview is in Dive Into HTML5. Note that depending on the browser, the limit on the amount of data you can store is quite small. I think it used to be as low as 5MB, although now I think some browsers have upped it a bit.
  3. There is also some support (I think only in Google Chrome for now) for local filesystem storage. If you want to store large media assets (e.g., images, video), then this is basically required (the previously mentioned things only store strings, not binary files). This is also a bit flaky at the moment, and totally non-cross-platform. References: File API, File System.
  4. A more heavyweight option is to package up an html 5 app into a native application for a mobile device. 90% of the code required is standard web stuff, with the remaining 10% needed to hook into hardware features of the device such as GPS and camera, and also the connection glue that bridges the html to native gap. Cordova is the current leader for this, although there are many competitors popping up, such as Ionic Framework.

A good reference for all of this (although a bit evangelical) is HTML5 Rocks.

Note: if you find inaccuracies here or have other suggestions, please email me.