HTML5 Application Cache

With HTML5, creating a cache manifest file allows you to easily create offline versions of your web applications.

Note:The technology for the Application Cache has been deprecated by web standards and is no longer recommended for use.

What is the Application Cache (Application Cache)?

HTML5 introduced the Application Cache, which means web applications can be cached and accessed even when there is no Internet connection.

The Application Cache brings three advantages to applications:

  1. Offline browsing - Users can use the application even when it is offline
  2. Speed - Resources loaded from the cache are faster
  3. Reduced server load - The browser will only download updated or changed resources from the server.

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 10, Firefox, Chrome, Safari, and Opera support the Application Cache.

HTML5 Cache Manifest Example

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

Instance

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

<body>
Document content......
</body>

</html>

Try it »

Cache Manifest Basics

To enable the Application Cache, include the manifest attribute in the <html> tag of the document:

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

Any page that includes the manifest attribute will be cached when accessed by the user. Pages will not be cached unless specified in the manifest file (unless the page itself is specified in the manifest file).

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

RemarkNote that the manifest file needs to be configured with the correct MIME type, which is "text/cache-manifest".

Manifest File

The manifest file is a simple text file that informs the browser which resources are cached and which are not.

The manifest file can be divided into three parts:

  • CACHE MANIFEST- Files listed in this section will be cached after the first download
  • NETWORK- Files listed in this section require a connection to the server and will not be cached
  • FALLBACK- Files listed in this section specify the fallback page to be used when the page cannot be accessed (e.g., 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. After the manifest file is loaded, the browser will download these three files from the root directory of the website. These resources will remain available even when the user disconnects from the Internet.

NETWORK

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

NETWORK:
login.php

The asterisk (*) can be used to indicate that all other resources/files require an Internet connection:

NETWORK:
*

FALLBACK

The FALLBACK section below specifies that the "offline.html" page will be used as a fallback for all files in the /html5/ directory when the Internet connection cannot be established:

FALLBACK:
/html/ /offline.html

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

Update Cache

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

  • The browser cache is cleared by the user
  • The manifest file is modified (refer to the tips below)
  • The application cache is updated by a program

Instance - Complete Manifest File

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

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

RemarkTips:Lines starting with "#" are comments, but they can also serve other purposes. The application cache will be updated when the 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 lines is a way to make the browser re-cache the file.

About the Application Cache

Be mindful of what is cached.

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:The browser's capacity limit for cached data may vary (some browser settings limit each site to 5MB).

Other Extensions