HTML5 AppCache

Caching web pages has been around for quite a while, but its effectivness has always been a question. All browsers have caching mechanisms, but they're unreliable and don't always work as you might expect. Unless you explictly save the contents you may not be able to browse websites that you were online just a moment ago. HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface a.k.a AppCache.

Using the cache interface gives your application three advantages:

1. Offline browsing - users can navigate your full site when they're offline. For business applications that require valid session, this scenrio could translate to caching static resources on user machines.
2. Speed - cached resources are local, and therefore load faster.
3. Reduced server load - the browser will only download resources from the server that have changed.

The AppCache allows a developer to specify which files the browser should cache and make available to offline users. Your app will load and work correctly, even if the user presses the refresh button while they're offline. To allow your existing application to take advantage of this feature you need to add "manifest" attribute to html tag and point it to appropriate cache manifest file which in turn controls which resources to be cached and which ones need network access.

The manifest attribute should be included on every page of your web application and can point to an absolute URL or relative path to your .manifest file. The file does not need to end in ".manifest", but needs to be served with the correct mime-type (see below).

A .manifest file must be served with the mime-type text/cache-manifest. You may need to add a custom file type to your web server or .htaccess configuration.

For example, to serve this mime-type in Apache, add this line to your config file:

AddType text/cache-manifest .manifest

The cache manifest file is a simple text file that lists the resources the browser should cache for offline access and may look something like this:

CACHE MANIFEST

index.html
stylesheet.css
images/logo.png
scripts/main.js

This example will cache four files on the site. The CACHE MANIFEST string is the first line and is required. Every URL or site is limited to 5MB worth of cached data.

A manifest can have three distinct sections: CACHE, NETWORK, and FALLBACK.

CACHE: 
    This is the default section for entries. Files listed under this header (or immediately after the CACHE MANIFEST) will be explicitly cached after they're downloaded for the first time.

NETWORK:

Files listed under this section are white-listed resources that require a connection to the server. All requests to these resources bypass the cache, even if the user is offline.

FALLBACK:

An optional section specifying fallback pages if a resource is inaccessible. The first URI is the resource, the second is the fallback. Both URIs must be relative and from the same origin as the .manifest file

A complex example like the one below can illustrate better on how these sections work,

CACHE MANIFEST

# Explicitly cached entries

CACHE:
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.

NETWORK:
login.jsp
/mycontroller
http*://my.domain.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/

FALLBACK:

/main.htm /static.html
images/large/ images/offline.jpg

Resources configured under cache manifest can be updated/purged based on events fired by appcache API such as download progress, updating the app cache, and error conditions or programatically checking for life cycle status of the appcache object.