HTML5 Application Caching

April 6th, 2011 Leave a comment
Like the article?
HTML5 Offline Application Cache

HTML5 has a number of great things about it that HTML4 did not; in this article, we’re going to talk about one specifically, principally how much better it is at dealing with offline caching than its predecessor. In HTML4, you had no alternative to offline caching except for manually downloading whatever it is you wanted off the website you were browsing; this was clumsy and inefficient, especially since the website can change daily or even hourly, rendering your offline copy useless until you manually downloaded it all over again. Furthermore, the page would render oddly if you didn’t download all the style sheets associated with it, etc. and so forth.

Thankfully, HTML5 brings with it a new ability called offline Application Caching, which is the ability to smartly store pages required for the web application to function properly directly on user’s machines are even when the user is offline.

Why bother, you ask? What if the user doesn’t want to keep a local copy of your website on their page?

Well, you’ve got one thing right: it is presumptuous to assume that users want to keep a copy of your website available at all times. However, given that server load is a commodity nowadays, you can, for example, cache all your CSS and JavaScript locally, as well as oft-used pages like the homepage. This gives two benefits: one, the page loads faster for the user. Two, they’re not re-downloading those files every time they connect; the browser polls the server to see if the files have changed, and if not it uses the locally cached copies and saves your server quite a bit of load.

At any rate, here’s how to perform this small piece of HTML5 trickery!

1. Tell the server you want to use offline app caching

Add this line every HTML page you have:

<html manifest="manifest.cache">

This tells the browser to download the files specified in the manifest file- fairly straightforward! One thing to note, however: Most web servers will not be ready to handle the cache manifest, since HTML5 is a new technology. You’ll have to serve the content with the MIME type text/cache-manifest; the setup for this varies from server to server. For Apache, put this line in your httpd.conf file or in a .htaccess file in the root of the web directory:

AddType text/cache-manifest .cache

then make sure your cache manifest ends in a .cache extension. You could of course change the extension in the code example above if .cache doesn’t do it for you, but make sure your configuration extension and the extension of the actual file match!

2. Create the manifest.cache file

Drop a file called manifest.cache that looks like this into your http root directory:

#version 1 (this is a comment)
CACHE MANIFEST
index.html
styles.css
javascript.js
pictures/pictureofme.jpg

NETWORK:
login.php

FALLBACK:
importantpage.html backuppage.html

Here we have three separate parts: the Cache Manifest on its own, the Network, and the Fallback. Let’s take a closer look at each!

Cache Manifest

The files in the Cache Manifest file by themselves are files that should be cached locally. These are the ones that function much as the general description I gave above; they are files that, unless modified, are always loaded from the local cache. Good files to cache are ones that don’t change often; stylesheets, javascripts, headers, footers, logos, etc. and so forth, and in the example we’ve done just that: cached a homepage, a stylesheet, a javascript, and a picture of me (maybe more narcissistic than usual, but hey!) When the user visits my site, they will download those files in a local cache and use them instead of pulling them down every time.

Network

The files in Network are the ones that should never be used from the cache. Why would you want to do that? Well, some pages like search, login, or really any other dynamic pages should not be cached; they would not work correctly offline and would create many more problems than they’d solve for the user. What this line basically means is that if there is no connection, the browser should not use any cached version they might have stored locally.

Fallback

The Fallback section may be the least intuitive of the three. Fallback basically says that if the specified resource cannot be found cached, the server will use the backup resource specified in the second line. So in our setup here, if the important dynamic page importantpage.html cannot be found cached, the browser knows to switch to backuppage.html as a backup (hence the “Fallback” idea!).

Put together, these can be a rather powerful force. For example, the HTML5 doc itself actually has an amazingly brilliant use of these concepts which I will reproduce here:

CACHE MANIFEST
FALLBACK:
/  /offline.html
NETWORK:
*

What this code does is basically cache each page as it’s fetched, and show an offline html page for any pages that it has not fetched that are accessed offline. the wildcard operator in the NETWORK portion means that everything can still be accessed live, even if it’s on a different domain (if the site is using a CDN, for example), so images and such hosted offsite will still be loadable while connected with a live network connection. It’s elegant, wonderful, and a great example of what offline application caching is really capable of (kudos to the HTML5 spec guys for coming up with a great example).

Conclusion

I hope this article has really impressed upon you the utility of HTML5 offline application caching. It has the potential to speed up local client web browsing as well as ease the load off of your web servers, and should absolutely be a consideration when you being to plan your next HTML5 site or migrate your existing one!

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
If you liked this article, consider enrolling in one of these related courses:
Don't miss another post! Receive updates via email!

Comment