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?
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:
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:
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!
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.
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).
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!
If you liked this article, consider enrolling in one of these related courses:
|Jun 26-27||HTML5 Training Course - Introduction|
|Aug 28-29||HTML5 Training Course - Introduction|
|Oct 30-31||HTML5 Training Course - Introduction|
|- Classroom - Online|