Creating offline applications with HTML5

Intel Developer Blog: Christoph Jechlitschek offers advice on using HTML5 caching features
Publish date:
Social count:
2_intel developer blog html5.jpg

For most computing devices and apps today, connectivity is the killer feature. Operating systems including Windows 8 have sharing features built in, so you can post content on Facebook and Twitter without going into a dedicated app or website, and most apps are enhanced with a layer of social interaction.

The extent of that varies greatly, from simple leaderboards to real-time cooperative or competitive gameplay. For many apps, the social dimension provides the stickiness that keeps people coming back, and also adds a viral marketing benefit because users recruit their friends to use the app with them.

You can’t rely on universal connectivity, though. When a device can connect, users expect their apps to use that facility, but they don’t want the device to feel broken when there is no network coverage. That means apps need to be written in such a way that they can gracefully fall back to working without network connectivity, when they need to.

Christoph Jechlitschek from Intel has written an article exploring the HTML5 features that enable you to create offline web applications. He shows you how you can use a manifest file to detail the resources that you want the browser to download and cache, which might be images or could be HTML, Javascript, or CSS code. The manifest file is (at its simplest) a list of resources you want to cache and is linked in to the HTML file by adding attributes to the opening tag.

One tip that’s particularly valuable is that the Firefox browser enables you to see how much data is stored in the offline cache, so you can test whether your application elements are being cached successfully or not. Firefox won’t cache data from a web application without asking the visitor the first time, so when prompted during your own testing you need to confirm it’s okay.

It would be a good exercise to test that the app still works in case the user refuses, though, if you intend to host your app on the web. Users might refuse to allow caching, if they don’t fully understand the benefits, so you can avoid this by making sure you explain what you’re doing and why. If users do refuse, you should make sure that the app degrades gracefully in any case, including clear error messages and guidance where necessary.

Jechlitschek offers a good tip for overriding the cache. If you need to update a previously cached page, it won’t be enough to just update the page. If you tell the browser to cache a HTML page, the cached version is what will be shown when it’s requested again later, even if it’s since been updated on the server.

The way you force a new download is to modify the manifest file. If the manifest file changes, the browser will download the resources specified in it again. The change can be just a comment, so developers often add a comment indicating the version number in the manifest file. They can then update that version number whenever the web pages can’t, and force a new download, overriding the cache.

Offline storage is valuable for many apps. If you’re using an email app, you still want to be able to read and write emails, even when you can’t synchronise with the server.

Similarly, if you’re using a social networking app, you probably want to be able to read content even if the connection isn’t there to update your own status. The caching features in HTML5 can be essential for optimising hosted applications for interrupted connectivity and speed, and can also be useful as you build HTML5 apps you plan to ship as apps.

See Jechlitschek’s article for more advice on using the HTML5 caching features. Find more tips on developing using HTML5 in the Intel Developer Zone.

• This blog post is written by Softtalkblog, and is sponsored by the Intel Developer Zone, which helps you to develop, market and sell software and apps for prominent platforms and emerging technologies powered by Intel Architecture.