HTML 5 Application Cache

Using HTML5, you can easily create an offline version of a web application by creating a cache manifest file.

What is Application Cache?

HTML5 introduces application caching, which means that web applications can be cached and can be accessed when there is no Internet connection.

Application caching brings three advantages to applications:

  1. Offline browsing-users can use them while the app is offline
  2. Speed-cached resources load faster
  3. Reduce server load-the browser will only download updated or changed resources from the server.

HTML5 Cache Manifest example

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

Example

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head> 
<meta charset="UTF-8">
<title>Novice Tutorial</title> 
</head>
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">Get date and time</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>Try to open <a href="tryhtml5_html_manifest.htm" data-et-target-link="_blank">This page</a>, Reload this page while offline, and the page can also be accessed.</p>
</body>
</html>

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>

Every page with a specified manifest will be cached when the user visits 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”.

Please note that the manifest file needs to be configured with the correct MIME-type, namely “text/cache-manifest”. Must be configured on the web server.

Manifest file

The manifest file is a simple text file that tells the browser what is cached (and what is not cached).

The manifest file can be divided into three parts:

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

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

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

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

NETWORK

The following NETWORK section stipulates that the file “login.php” will never be cached and will not be available when offline:

NETWORK:
login.php

An asterisk can be used to indicate that all other resources/files require an Internet connection:

NETWORK:
*

FALLBACK

The following FALLBACK section stipulates that if an Internet connection cannot be established, “offline.html” is used to replace all files in the /html5/ directory:

FALLBACK:
/html/ /offline.html

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

refresh cache

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

  • User clears browser cache
  • The manifest file is modified (see the hint below)
  • Updating the application cache by the program

Example-Complete Manifest file

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

Tip: The lines beginning with “#” are comment lines, but they can also be used for other purposes. The cache of the app will be updated when its manifest file changes. If you edit an image or modify a JavaScript function, these changes will not be cached again. Updating the date and version number in the comment line is a way to make the browser re-cache the file.

A note about application caching

Please pay attention to the cached content.

Once the 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 set a limit of 5MB per site).