HTML5 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:
Offline browsing-users can use them when the app is offline
Speed-cached resources load faster
Reduce server load-the browser will only download updated or changed resources from the server.
Internet Explorer 10, Firefox, Chrome, Safari and Opera support application caching.
HTML5 Cache Manifest example
The following example shows an HTML document with a cache manifest (for offline viewing):
Cache Manifest basics
To enable application caching, include the manifest attribute in the <html> tag of the document:
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.
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)
The first line, CACHE MANIFEST, is required:
The following NETWORK section stipulates that the file "login.php" will never be cached and will not be available when offline:
An asterisk can be used to indicate that all other resources/files require an Internet connection:
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:
Note: The first URI is a resource, and the second is a substitute.
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
# 2012-02-21 v1.0.0
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).