HTML Application Cache
Conventionally, web based applications only work when a computer has an active connection to the Internet. The new application cache feature in HTML 5 enables a browser to save all of a websites resources so that it can display correctly even when the computer is not connected to the Internet. Apart from enabling offline browsing, using the HTML 5 application cache feature improves performance by eliminating the need to load resources from the web server each time the user on the client computer makes a request to access cached pages. It also reduces server load in that a browser will only need to download updated or changed parts of a cached website.
Caching Files
To cache webpage files for offline use, you first need to create a cache manifest file. This is text file that instructs browsers on what files it should store and those that it should leave out. Below is an example of a simple cache manifest file.
Advantage Of Application Cache
- Offline browsing ? Users can use the application even when they’re offline or there are unexpected disruptions in network connection.
- Improve performance ? Cached resources load directly from the user’s machine rather than the remote server hence web pages load faster and performing better.
- Reduce HTTP request and server load ? The browser will only have to download the updated/changed resources from the remote server that minimize the HTTP request and reduce the server load.
Cache Manifest File
CACHE MANIFEST # v1.0 : 10-08-2014 CACHE: # pages index.html # styles & scripts css/theme.css js/jquery.min.js js/default.js # images /favicon.ico images/logo.png NETWORK: login.php FALLBACK: / /offline.html
How to Use Cache Manifest File
<html manifest="example.appcache"> ... </html>
How to Update Cache Manifest File
function onUpdateReady() {
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
location.reload();
}
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
