HTML Tutorial | HTML5 API | Application Cache

Application Cache API

The application cache API caches web applications so users can access them without an internet connection.
Therefore, using application cache makes it easy to create an offline version of a web application.

The advantages of using application cache are as follows.

• Offline access: Users can use the web application even while offline.
• Speed: Cached resources can be loaded quickly.
• Reduced server load: The web browser only needs to update resources when server resources change.

The major web browser versions that support application cache are as follows.

Cache Manifest File

To use application cache, you must first create a cache manifest file.
The cache manifest file tells the web browser which files should be cached and which files should not be cached.

This manifest file consists of three sections as follows.

• CACHE MANIFEST: Lists files that should continue to be cached after the first download.
• NETWORK: Lists files that require a connection to the server. These files are never cached.
• FALLBACK: Lists replacement files to use when a file cannot be accessed.

Updating the Cache

The web browser updates cache information when any of the following occurs.

• The user forcibly clears the web browser’s cache.
• The application cache is updated by a program.
• The cache manifest file is modified.

Syntax

CACHE MANIFEST
# 2016-03-22 v1.0.1
test.html
test.css
test.js
 
NETWORK:
test.jpg
 
FALLBACK:
/ offline.html

Once a file is cached, even if the file on the server is modified, the web browser shows only the version cached on the user’s side.
Therefore, after modifying a file on the server, you must make the web browser update the cache.

The most commonly used method is to modify the comment section in the cache manifest file.
Typically, the update date and version information are written as comments, and modifying this part causes the web browser to update the cache.