Quick Tip: Getting Offline Access with HTML5 Application Cache


Just when you thought you’d seen all the cool features of HTML5, I’m here to bring you yet another one. The internet is no longer about just websites; it’s about web applications. Often, our users are on portable or mobile devices, and they won’t always have access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.



Step 1: Make the Cache Manifest

The trick here is using a cache manifest file. In its most basic form, it’s incredibly simple:

CACHE MANIFEST

# version 0.1

index.html
style.css
script.js
preview.jpg

Step 2: Serve the Manifest Correctly

This file needs to be served with a content-type header of text/cache-manifest; it’s really simple to do this with a .htaccess file:

AddType text/cache-manifest manifest

This will serve all files with an extention of “manifest” with the appropriate content-type header.


Step 3: Hook the Manifest In

To use the cache manifest file, you simply add a property to the html element:

<!DOCTYPE html>
<html lang="en" manifest="site.manifest">
	<meta charset='utf-8'>

Now, the next time a user visits your site / app, their browser will cache the required files. It’s that easy. If they browse to your URL when they’re offline, they’ll get the cached content.


Caveat: Refreshing the Cache

It’s important to note that even when the user is online, the browser will only go to the server to get new content in three cases:

  1. The user clears their cache (obviously removing your content).
  2. The manifest file changes.
  3. The cache is updated via JavaScript

So, to force all your users to reload their cache, you can change something in the manifest file (not the files linked to, the actual content of the manifest file). Most of the time, you’ll probably just want to change a comment, and that will be enough.

If you want, build cache updating into your app via the JavaScript API; that’s beyond the scope of this quick tip, but if you want to learn more, check out this article at html5rocks.com.


Browser Support

Like a lot of other HTML5 features, the Application Cache is supported by all the modern browsers.


Chart from www.findmebyip.com

And that’s HTML5′s Application Cache; it’s pretty cool, and I’m sure it will be used by developers, of almost any site, to provide a gracefully degrading experience that keeps their users happy wherever they are. Thanks for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *