Offline Application

HTML5 introduces new methods for a web site or web application to function without a network connection as, having some level of access is better than nothing.

An offline web application is a list of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. The home page of the offline web application points to this list, called a manifest file, which is just a text file located on the web server. A web browser that implements HTML5 offline applications will read the list of URLs from the manifest file, download the resources, cache them locally, and automatically keep the local copies up to date as they change. When user access the web application without a network connection, the web browser will automatically switch over to the local copies instead.

The application cache is controlled by a plain text file called a manifest, which contains a list of resources to be stored for use when there is no network connectivity. The list can also define the conditions for caching, such as which pages should never be cached and even what to show the user when he follows a link to an uncached page. If the user goes offline but has visited the site while online, the cached resources will be loaded so the user can still view the site in a limited form. An example manifest file is given

CACHE MANIFEST

CACHE:

/css/screen.css

/css/offline.css

/js/screen.js

/img/logo.png

http://example.com/css/styles.css

FALLBACK:

/ /offline.html

NETWORK:

There are three different sections in a manifest file

Attribute	Detail
CACHE	A list of explicit URLs to request and store
FALLBACK	What to do when an offline user attempts to access an uncached file
NETWORK	Which resources are available only while online

Referencing the manifest – Referencing a manifest file is done by adding the manifest attribute to <html> tag a

// your html document

</html>

Cache refresh – Once a cache has been successfully downloaded, the browser will retain those assets until either the user clears the cache or an update trigger at web server. Triggering an update with manifest file requires that the contents of that file change, not just the assets themselves. Updating the assets on your server will not trigger a cache update. Adding or removing resources completely also requires to edit manifest file. But to just amending an already cached stylesheet, comments are used by adding a version number comment which can be changed when to trigger an update, as

CACHE MANIFEST

# Version 9

CACHE:

/css/screen.css

The next time to trigger a cache refresh can be done by incrementing the version number. When the user next visits the online version of a page including this manifest, it will re-download the manifest file, notice the change, download the listed assets, and purge the existing cache.