HTML 5 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 while the app is offline
- Speed-cached resources load faster
- Reduce server load-the browser will only download updated or changed resources from the server.
HTML5 Cache Manifest example
The following example shows an HTML document with a cache manifest (for offline viewing):
<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> <title>Novice Tutorial</title> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">Get date and time</button></p> <p><img src="logo.png" width="336" height="69"></p> <p>Try to open <a href="tryhtml5_html_manifest.htm" data-et-target-link="_blank">This page</a>, Reload this page while offline, and the page can also be accessed.</p> </body> </html>
Cache Manifest basics
To enable application caching, include the manifest attribute in the <html> tag of the document:
<!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html>
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”.
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:
CACHE MANIFEST /theme.css /logo.gif /main.js
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:
FALLBACK: /html/ /offline.html
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
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.php FALLBACK: /html/ /offline.html
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).