HTML5 Introduces a variety of new possibilities for the web. One of those is the ability to make a website available offline. Adding these features to web sites bridges the gap between the native and web world. A comparison between web and native development is outside the scope of this post.

At AE we took the time to experiment with the new offline features, the outcome of which you will read about in this post.

AppCache is broken

If you Google the words "html5 offline" you will most likely end up at the AppCache specification. It is a W3C specification providing web developers with means to dictate the browser what it is allowed to cache, i.e. what resources the browers may store on the user's device.

Once the files are stored, they can be fetched from the device instead of the internet. Congratulations, your website is now available offline! This is exactly the biggest issue of the AppCache specification: it is deceivably simple.

According to the specification, all it takes to make your website available offline is the addition of one simple file, the manifest. Sadly, however, the specification drops the ball on multiple occasions and hence it takes a lot more than the manifest file alone to make your site work offline. Jake Archibald, a Developer Advocate for Google's Chrome, has written an excellent A List Apart article on the walls you'll hit when involving yourself with the AppCache. Worth the read!

What about the data?

Once you've made AppCache behave, only then may you proclaim your website works offline. However, at that point you might encounter AppCache's real limitation: it is only designed for caching static content.

In case your website needs dynamic data, you'll need something else to complement the AppCache. More specifically you'll need a mechanism to store the data itself offline. Luckily HTML5 has a feature for storing data on the client as well, namely LocalStorage. And even better, it does not suffer from a flaky specification!

LocalStorage is merely the tool you'll have to use for your offline data strategy. You are required to decide what (part of the) data you want to be available offline to the user. You can't simply expect to store all of your data offline?

Furthermore, you have to take into account the submitting of data offline as well. Just one of many possible solutions is to store submitted data in the LocalStorage and to synchronize changes once an internet connection is available. This post will not address a more detailed discussion about data synchronization.

In the article I mentioned above, Jake explains the offline data strategy at Lanyrd, a social tool to discover conferences. They decided to store only the data offline of conferences a user was attending or had added to his favorites. In our opinion, that's a very sensible strategy and the underlying idea might prove useful when you're designing your own.

Conclusion

From our experiments, it was clear AppCache is not an ideal solution to make your website work offline. An alternative approach would be to use ServiceWorkers. This is a relative new development in the HTML5 world and caching static resources is just one of many features it boasts. We believe the ServiceWorker will play a central role in the transition of websites to web applications.

Both the AppCache and ServiceWorker focus on static resource caching, so whichever you'd pick, you'll also need to define an offline data strategy.