What is an Application Cache ?
HTML5 provides the application caching mechanism which helps us to run our web application offline.
Application caching mechanism loads faster and quickly, since it loads from cached resources.
Actually, our web application is cached, and accessible without an internet connection(offline mode) even if the user press the Refresh button.
How application caching mechanism works ?
Application caching mechanism allows us to to cache our web application.
And once the file is cached, the browser will continue to show the cached version, even if you change the file on the server.
This application caching mechanism is achieved by creating a cache manifest file.
Note: Browsers may have different size limits for cached data (some browsers have a 5MB limit per site).
What is the cache manifest file ?
Manifest file is a simple text file, which insists the browser what to cache and what not to never cache.
Manifest file specifies the list of resources that are to be cached in the browser.
To updates the cache in the browser, we need to change the manifest file.
Manifest file Sections :
Manifest file has three basic sections listed below,
1. CACHE MANIFEST
2. NETWORK
3. FALLBACK
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
1. CACHE MANIFEST
Files listed under this header will be cached after they are downloaded for the first time.
Example :
CACHE MANIFEST
# T1-V2 test release
index.html
images/profileImg.JPG
css/mainPart.css
Manifest file should start with the keyword CACHE MANIFEST.
# symbol indicates a comment section.
index.html, profileImg.JPG and mainPart.css files are the resources that should be cached by the browser.
2. NETWORK
Files listed under this header requires a connection to the server, and will never be cached.
Example :
NETWORK
/index.php
File can be accessed only during online and should never be cached are listed under this section
index.php can be accessed only during online.
Example :
NETWORK
*
All the resources except for those mentioned in the CACHE MANIFEST section can be accessed only while online.
3. FALLBACK
Files listed under this header specifies fallback pages if a page is inaccessible.
This Informs the browser what to display when the browser tries to access an uncached file during offline.
Example :
FALLBACK
/html /offline.html
Browser should display offline.html whenever it tries to access the uncached files under the html folder during offline.
Example :
FALLBACK
/index.html /offline.html
Browser should display offline.html instead of index.html during offline if index.html is not cached
Example :
FALLBACK
/ /offline.html
Whenever the user is offline, all the uncached files under the root folder will be replaced by offline.html.
Simple Manifest file :
CACHE MANIFEST
# t1-v2
CACHE:
index.html
images/img1-1.JPG
css/mainPart.css
# Require the user to be online.
NETWORK:
*
# offline.html will be served in place of all other .html files
FALLBACK:
/index.html /offline.html
Referring the Manifest file :
How to refer the Manifest file?
This is referenced from the HTML web page that you would like to cache using the manifest attribute.
1. Application cache for an application :
Example :
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
Webpage content of the document.
</body>
</html>
2. Application cache for an Website URL.
Example :
<!DOCTYPE HTML>
<html manifest="ttp://www.example.com/example.mf">
<body>
Webpage content of the document.
</body>
Clearing Application Cache :
How to clear the application cache ?
The application cache will remain intact until any one of the following happens
1. If the browser cache is cleared by the user.
2. Manifest file is modified manually.
3. Manifest file is modified programatically.
Checking Application Cache Status :
How to check the application cache events ?
This can be accessed programmatically using the window object.
window.applicationCache.status.
In this process the browser interacts with the manifest file and creates the number of cached events.
Application cache status can be tracked programmatically using the status property of the application cache object.
Updating the Application Cache :
How to update the Cache ?
Once an application is cached, it remains cached until one of the following happens:
1. When user clears the browser’s cache
2. When Manifest file is modified.
3. When the application cache is programmatically updated
Example :
function onUpdateCache() {
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
location.reload();
}
}
window.applicationCache.addEventListener('updateready', onUpdateCache);
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
Advantages of Application cache
What are the advantages of Application cache ?
1. Offline browsing
Users can use and access the web application when they’re in offline.
2. Speed
Cached resources in the web application loads faster.
3. Reduced server load
The browser will only download updated/changed resources from the server
You made some nice points there. I looked on the internet for the subject matter and found most individuals will agree with your site.
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.