HTML5 features appcaching, a way to make your web sites and apps work offline, and to increase their performance as well.

I’m sure you know, browsers cache HTML, CSS, JavaScript files, images and other resources of the sites you visit, to speed up the subsequent loading of pages. However, you never know when the browser might discard cached files, and so this is not a reliable way for sites to work offline. But what if we could tell the browser what to cache? Well, with HTML5 application caches (also known as ‘appcache’) we can do just that.

An appcache manifest contain several lines in that order:

• In the first line we declare “CACHE MANIFEST” (required)
• Second line: “CACHE:” – which specifies the URLs of resources.
• We can also optionally specify which resources should not be cached, in a section of the manifest file introduced by the string “NETWORK:”. These resources aren’t just not cached, but further, won’t be used when the user is offline, even if the browser has cached them in its own caches.
• We can also optionally specify fallback resources to be used when the user is not connected, in a section of the file called “FALLBACK:”
• You can add comments to the file with, simply by beginning a line with “#” – that’s an important feature to make the version readable for you as a developer. It’s also a nice way to let the browser ‘know’ that something changed in our app and it’s needed to fetch a new version of the app from the network.

Here is a simple example:


CACHE MANIFEST
#version 1.0

CACHE:

#images
/images/logo.png
/images/ido-header.png

#pages
/pages/index.html
/pages/main.html

#CSS
/style/main-style.css

#scripts
/js/main-logic.js

FALLBACK:
/ /offline.html

NETWORK:
sign-new-user.html

Creating a HTML5 cache manifest file the easy way:

• manifested – cool tool to save you time and from what I’ve tried it works.
• http://westciv.com/tools/manifestR/ – It is a bookmarklet, which you drag to your bookmarks bar. Then, when you visit any page, you can click the manifestR button, and it will create an HTML5 appcache manifest file for that page.
• Some code to play with: https://github.com/jamesgpearce/confess