HTML5 Cache and JavaScript — how to use HTML5 cache?

Today, a few words about the issues and possibilities offered by HTML5 Cache.

Working with HTML5 Cache

The back end developers can associate it with a kind of caching the pages, to speed up their loading. In the case of HTML5 Cache it’s also about some other benefits.

HTML5 offers caching mechanism for applications in such a manner, to make an application available even without Internet connection!

The main benefits are:

– the ability to browse offline — users can use the application being offline,

– the speed — resources from the cache are loaded faster,

– server load reduction — browser will download only the changed / updated resources from the server, when will be on-line.

The base to take advantage of these opportunities is the Manifest file.

The Manifest file of HTML5 Cache

We must define the attribute of ‘html’ element, in which we give the name of our Manifest file:

<html manifest="demo.appcache">

  The content goes here …


The recommended extension for manifest file is “.appcache”.

Warning: the file must be served with the correct MIME type. In this case it’s: “text/cache-manifest” (the server must be configured to handle this type).

The Manifest file itself is a simple text file with appropriate content.

An example of HTML5 Cache Manifest file:


The first line (CACHE MANIFEST section) is required.

CACHE MANIFEST — identifies resources that will be cached in the first download.

There are two additional sections:

NETWORK — resources listed here won’t be cached, and always will need network connection

FALLBACK — this section defines the “emergency” page if the requested page is not reachable

For example:



/html/ /offline.html

In this case the offline.html file will be served instead of all the files from “html” directory, when downloading them from the network will be impossible.

Be careful

Well, when the file is cached, the browser will show cache even if you change the file, so we have to update also the manifest file.

Naturally, it is possible to operate at HTML5 Cache from the JavaScript code.


var appCache = window.applicationCache;
alert(appCache.status); // get status

// cache reload attempt

Related resources

– basics and examples of using HTML5 cache in JavaScript:

– description in the “Dive into HTML5”:

– W3C:

– HTML5 Cache in the context of web applications for mobile devices:

– resources from MDN, Opera …

and Apple Developer Center.


The more we work with HTML5, the more we appreciate the opportunities offered. Some of them are a big leap forward in web programming.