HTML5 Application Cache

With Application Cache, by creating a cache manifest file, it is easy to create an offline version of a web application.

What is Application Cache?

HTML5 introduces Application Cache, which means web applications can be cached and accessed even without an internet connection.

Application caching brings three advantages to applications:

  1. Offline browsing - Users can use them when the app is offline
  2. Speed - Cached resources load faster
  3. Reduce server load - Browsers will only download updated or changed resources from the server

Browser Support

The numbers in the table indicate the first browser version that fully supports application caching.

API
Application Cache 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest Example

The following example shows an HTML document with a cache manifest (for offline browsing):

Example

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Document content ...
</body>
</html>

Try It Yourself

Cache Manifest Basics

To enable application caching, include the manifest attribute in the <html> tag of the document:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Each page specified with a manifest is cached when the user accesses it. If the manifest attribute is not specified, the page will not be cached (unless the page is directly specified in the manifest file).

The recommended file extension for the manifest file is: ".appcache".

Note:The manifest file needs to be set with the correct MIME-type, i.e., "text/cache-manifest". It must be configured on the web server.

Manifest File

The manifest file is a simple text file that informs the browser of the content to be cached (and the content not to be cached).

The manifest file has three parts:

  • CACHE MANIFEST - Files listed under this heading will be cached after the first download
  • NETWORK - Files listed under this heading require a connection to the server and will not be cached
  • FALLBACK - Files listed under this heading specify the fallback page when the page cannot be accessed (such as a 404 page)

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

The manifest file lists three resources: a CSS file, a GIF image, and a JavaScript file. After the manifest file is loaded, the browser will download these three files from the root directory of the website. Then, these resources are still available regardless of when the user disconnects from the internet.

NETWORK

The following NETWORK section specifies that the file "login.php" will never be cached and is unavailable offline:

NETWORK:
login.asp

You can use an asterisk to indicate that all other resources/files require an internet connection:

NETWORK:
*
FALLBACK

The FALLBACK section below specifies that if an internet connection cannot be established, use "offline.html" to replace all files in the /html/ directory:

FALLBACK:
/html/ /offline.html

Note:The first URI is the resource, and the second is the alternative.

Update Cache

Once an application is cached, it will remain cached until one of the following occurs:

  • User clears browser cache
  • Manifest file has been modified (see the tips below)
  • Application Cache Updated by Program

Example - Complete Cache Manifest File

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

Tip:Lines starting with "#" are comment lines, but they can also serve other purposes. The application's cache will only be updated when its manifest file changes. If you edit an image or modify a JavaScript function, these changes will not be re-cached. Updating the date and version number in the comment line is a way to make the browser re-cache the files.

Considerations for Application Caching

Please be aware of the cached content.

Once a file is cached, the browser will continue to display the cached version, even if you modify the file on the server. To ensure that the browser updates the cache, you need to update the manifest file.

Note:Browsers may have different limits on the capacity of cached data (some browsers limit each site to 5MB).