Using the application cache it can be very easy to create an offline version of a web application, by creation of a cache manifest file.
What is Application Cache?
HTML5 has introduced application cache, which enables a web application to be cached, and accessible without having an internet connection.
Application cache can giva an application these three advantages:
Browser Support
The table numbers specify the version of thefirst browser which was completely supporting Application Cache.
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML Cache Manifest Example
The example below illustrates how an HTML document with a cache will 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
Inorder to enable application cache, inclusion of the manifest attribute in the document's <html> tag:
Every page having the manifest attribute specified will undergo cached when the user is visiting it. Incase the manifest attribute is not specified, the page will not undergo cache (unless and until the page gets specified inside the manifest file directly).
The file extension that is recommended for manifest files is: ".appcache"
A manifest file should be served with the correct media type, that is "text/cache-manifest". It should be configured on the web server.
The Manifest File
The manifest file can be known as a simple text file, which instructs the browser what to cache (and what not to cache).
The manifest file consists of three sections:
The first line - CACHE MANIFEST, is needed:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
The manifest file listed above consists of three resources: a CSS file, a GIF image, and a JavaScript file. As soon as the manifest file is loaded, the browser will be downloading the three files from the web site's root directory. So, even if the user is not having a connection to the internet, the resources is still available.
The NETWORK section as shown below illustrates that the file "login.asp" should not be cached, and is not available offline too:
NETWORK:
login.asp
An asterisk is used to denote that all other resources/files will be requiring an internet connection:
NETWORK:
*
The FALLBACK section below is specifying that "offline.html" will be availalbe as a replacement of all files in the /html/ catalog, if internet connection is lost:
FALLBACK:
/html/
/offline.html
Note: The first URL is known as the resource, the second is known as the fallback
Updating the Cache
If an application is cached, it will remain to be cached till any one of the following is happening:
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 that are starting with a "#" are called as comment lines, which can also have another purpose. An application's cache will get updated only when the manifest file is getting changed. Incase you are editing an image or change a JavaScript function, those
Notes on Application Cache
You need to be careful while deciding what you cache.
If a file is cached, the browser will be showing the cached version, even if you are changing the file on the server. To make sure the browser is updating the cache, you must be changing the manifest file.
Note: Different browsers will be having different size limits for these cached data (some of the browsers have for eg - a 5MB limit per site).