HTML5 introduces a pretty handy ability to cache remote resources locally for off-line use, meaning the resources are downloaded once. Then when the page is used again in the future the local (cached) copies of the file will be used instead of requesting the files from the server again.
Why would you want this? This functionality come is handy for developing sites that may need to be deployed in places with patchy Internet i.e remote satellite offices or most importantly HTML5 mobile applications.
How do I make this happen?
First up you need to make an .appcache file for your site telling the browser exactly what resources you would like to cache. In its simplest form a manifest file is just a standard text file with the .appcache extension. The first line of the manifest file contains the line “CACHE MANIFEST” and each new line afterward a filename and path for a resource to be cached is listed e.g
CACHE MANIFEST
/css/style.css
/js/scripts.js
A manifest attribute pointing to the location of the manifest file then needs to be added to the opening HTML tag inside the pages you would like to cache resources for locally. In addition you will also need to create a MIME type rule for your web server so that the manifest files get served with the text/cache-manifest mime type.
If you are using nginx as your webserver you can achieve this by adding the line below to the /etc/nginx/mime.types file (Debian) and reloading the web server config.
text/cache-manifest .appcache;
With Apache simply add the following line to a .htaccess file in the root of your site containing the following line:
AddType text/cache-manifest .appcache
Cache Manifest Subsections
Your cache manifest may also contain various subsections that allow fine grained control over how resources are handled these are NETWORK, CACHE and FALLBACK. Items that fall under the NETWORK section are resources that are not to be cached and are simply not available off-line.
Resources located under the CACHE section are cached and are available off-line. While files in the FALLBACK this section dictates alternate substitution resources for ones which are not available due to being off-line e.g
CACHE MANIFEST
NETWORK:
/js/do_not_cache.js
CACHE:
/images/logo.jpg
/css/offline.css
/offline.html
FALLBACK:
/index.html /offline.html
Comments may also be placed in your cache manifest files with each comment line starting with the hash or pound ( # ) symbol.
Browser support for off-line storage:
IE – None ( are you surprised? )
Firefox – 3.5+
Safari – 4.0+
Chrome – 5.0+
Opera – 10.6+
iOS – 2.1+
Android – 2.0+
UPDATE: I have since found manifesteR, this handy tool makes the generation of a cache manifest easy. Simply add the bookmarklet to your browser bookmarks, load the page you would like a cache for then click the bookmark and it will generate a manifest file for you automatically.