With application cache it is easy to make an offline version of a web application, by creating a cache manifest file.
What is Application Cache?
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
- Offline browsing - users can use the application when they're offline
- Speed - cached resources load faster
- Reduced server load - the browser will only download updated/changed resources from the server
Background
Web applications consist of web pages that need to be downloaded from a network. For this to happen there must be a network connection. However, there are many instances when users cannot connect to a network due to circumstances beyond their control. HTML5 provides the ability to access the web application even without a network connection using the cache manifest.
Web applications consist of resources identified by URLs. These can be HTML, CSS, JavaScript, images or any other source that is required for a web application to be rendered. Their addresses can be copied into a manifest file, which can be updated regularly by the author of the web application, indicating any new web addresses that are added or deleted. When connecting to a network for the first time, a web browser will read the HTML5 manifest file, download the resources given and store them locally. Then, in the absence of a network connection, the web browser will shift to the local copies instead and render the web application offline.
Browser Support
The numbers in the table specify the first browser version that fully supports Application Cache.
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Cache Manifest Example
The example below shows an HTML document with a cache manifest (for offline browsing):
Example
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Try it Yourself »Cache Manifest Basics
In order for the offline applications to work, a cache manifest file must be created by the web developer. If the web application exceeds more than one page then each page must have a manifest attribute that points to the cache manifest. Every page referencing the manifest will be stored locally. The cache manifest file is a text file located in another part of the server. It must be served with the following content type:
text/cache-manifest
To enable application cache, include the manifest attribute in the document's <html> tag:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
Every page with the manifest attribute specified 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 specified directly in the manifest file).
The recommended file extension for manifest files is: ".appcache"
A manifest file needs to be served with the correct media type, which is "text/cache-manifest". Must be configured on the web server.
The Manifest File
The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).
The manifest file has three sections:
- CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time
- NETWORK - Files listed under this header require a connection to the server, and will never be cached
- FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible
CACHE MANIFEST
The first line, CACHE MANIFEST, is required:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root directory of the web site. Then, whenever the user is not connected to the internet, the resources will still be available.
NETWORK
The NETWORK section below specifies that the file "login.asp" should never be cached, and will not be available offline:
NETWORK:
login.asp
An asterisk can be used to indicate that all other resources/files require an internet connection:
NETWORK:
*
FALLBACK
The FALLBACK section below specifies that "offline.html" will be served in place of all files in the /html/ catalog, in case an internet connection cannot be established:
FALLBACK:
/html/ /offline.html
Note: The first URI is the resource, the second is the fallback.
Updating the Cache
Once an application is cached, it remains cached until one of the following happens:
- The user clears the browser's cache
- The manifest file is modified (see tip below)
- The application cache is programmatically updated
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 a "#" are comment lines, but can also serve another purpose. An application's cache is only updated when its manifest file changes. If you edit an image or change a JavaScript function, those changes will not be re-cached. Updating the date and version in a comment line is one way to make the browser re-cache your files.
Notes on Application Cache
Be careful with what you cache.
Once a file is cached, the browser will continue to show the cached version, even if you change the file on the server. To ensure the browser updates the cache, you need to change the manifest file.
Note: Browsers may have different size limits for cached data (some browsers have a 5MB limit per site).