OFFLINE PAGES

Offline pages are available even when the browser is offline. The trick is to tell the browser to download these pages as long as the connection is alive: this can be done defining the list of offline pages in a manifest file.

Such file must be defined in the HMTL tag, for example:

<html manifest="/cache.manifest">

This manifest attribute should be specified in every page of the Web site we want to be cached.
Moreover it's important to download the manifest file with the content type "text/cache-manifest". For instance, assuming the web server is backed by Apache, this can be forced using the directive "AddType text/cache-manifest .manifest" in the .htaccess file.

The manifest file is divided into three sections: explicit, fallback and online whitelist. If the latest sections are omitted then all the manifest's content is assumed to be in the explicit section.

The purposes of these sections are:

  • Explicit - CACHE: resources in this section will be downloaded and cached locally (default functionality)
  • Fallback - FALLBACK: alternative files for online resources that can't be cached. Alternative files are specifed using the pattern: "<url of resource> <alternative resource>" (space separated).
    Example: "/ /offline.html" means that if a page under the root directory has not been cached then the offline.html page will be shown instead.
  • Online whitelist - NETWORK: resources in this section are never cached and are not available offline

A demo of the offline cache mechanism is available here.

To see the manifest file used by the demo click on the Show Code label below.

Remark: since the cache.manifest is defined only in the demo's pages (and not in the other site's pages) the fallback feature can not be tested here. To test the fallback feature you need to create another page, add it to the "offline set" and to the manifest file. Then it's necessary to emulate a partial cache failure: since this is a basic tutorial the "cache-failure" event has not been included in the current demo.