Using the cache manifest to work offline
Another one of the new features of HTML5 is the ability to specify your website to work offline, i.e. when the connection drops, your site will still work. This is achieved via a
cache manifest file, and it is this file and how to use it that this experiment will look at.
Let's take a look at the file format shall we?
There are a number of sections that make up a
manifest file, and they are as follows:
|CACHE MANIFEST||N||Not strictly a section, this needs to be at the top of every
|CACHE:||Y||This contains the list of files and resources that the browser should cache. This is the default section and if no others are added, every entry in the file will default to this one|
|NETWORK:||Y||This contains a list of files and resources that can only be accessed when the browser has online access. This can be ommitted, and anything that isn't specifically matched in the rest of the
|FALLBACK:||Y||This contains a list of mappings of file replacements when the browser has no online access, e.g.
This can also be used as a catch-all so that all requests for unknown files can be served by offline.html:
If you repeat a section, the entries in each will be concatenated together.
With that out of the way, let's take a look at a sample
cache manifest file:
So, what is this file doing? Well the first line,
cache manifest as indicated above, tells the browser that what follows this is a cache manifest file.
CACHE: lists what files the browser is to cache, here
write-message.js which is located in the
Then it specifies that the
random-image.php file (which simply chooses a random image to display) can only be called when the browser has online access (which makes sense of course, as this is a PHP file) under the
random-image.php therefore cannot be called when the site is offline, and therefore no image would be displayed, under the
FALLBACK: section a replacement JPG image (
many-leaves.jpg) file is specified which will be displayed instead of the result of
random-image.php. All other requests will be served with
It's also recommended to add a comment line such as
# version N
where N is a number you manually increment when changing the
cache manifest file. Browsers like to hold on to the file and this helps to force it to reload. (this tip comes straight from the pages of Introducing HTML5).
So that's the
manifest file, but how do we tell the browser about it? Easy. All you need to do is to add the following attribute to the
<html lang="en" manifest="cache.manifest">
cache.manifest happens to be the name of the
manifest file that I'm using.
Ther server your code is running on also needs to be told how to serve the the
manifest file correctly. For this we need to return to
the bane of our life our old friend, the MIME type.
If you're using a common web server such as Apache, the following line needs to be added to the
This ensures that Apache will send the
text/cache-manifest file header when you request any file with the
.manifest extension. You can test this by using a command line tool such as cURL.
What should you expect to see?
Underneath that should be a large picture of some leaves. Refresh it and you should see another one (you might see the same one - there are only 5 different images it can load, refresh it again if you don't believe me)
random-image.php (which returns a link to one of the random leaf images) with the static
As with all HTML5 elements at the moment, the
cache manifest works in this brower, sort of works in that browser, and doesn't work in others.
- Safari is the best browser to test this with. I was using the latest version for Windows, Safari 5.0.1.
- It also works fine in the latest Google Chrome (5.0.375.127)
- Opera 10.6 also gave the correct results
- Firefox claims to support it, but it's apparently buggy and you need to tell it to never cache the
manifestfile. I tried with 3.6.8 and even Firefox 4 beta 4 but so far have been unable to get it to work correctly.
- As usual, nothing in the HTML5 world works in Internet Explorer (well it will when version 9.0 comes out)
Whilst with some browsers (Opera and Firefox) you can turn on "Work Offline" mode, the best way to test it is to disable or unplug your network connection.
This feature is very useful should you want to have your entire site available to users should they suddenly go offline when browsing your site. It also makes it available for browsing when the user doesn't have a connection at all (e.g. when flying).
As with all HTML5 features, support isn't complete but for those who use a compatible browser (and there's nothing wrong with informing the user of the benefits of using such a browser with your site) then the benefits are worth it.