Introduction
This is a simple application showing how to create an application cache using he HTML 5 tools. The application cache is used to
store the static resources. The application cache is just like a browser used to run
the offline application and this article also helps to show how to create a manifest file
in your application.
Use the offline application cache to store
HTML, JavaScript, CSS, and media resources locally, to create web based
applications that work even when a returning user is not connected to the
Internet. You can also use the offline application cache simply to store static
resources locally to speed access to your website and reduce the server load
when a user returns to your site.
The application cache is similar to the
standard browser cache in that subsequent requests for cached files are served
from the local cache as opposed to making a network call to retrieve the
requested file. The primary differences between the application cache and
browser cache are the level of persistence and the ability to list specific
files without concern about expired headers and last modified dates.
Step 1 : Define the Event of manifest
file
- Checking : The checking event used
to check what is a new changes in a manifest file.
- Noupdate : This event show no any
changes in a manifest file.
- Downloading : This event used to
download the change resource of the manifest file.
- Updateready : This event used to
downloaded all listed resources into the cache.
- Obsolete : This event used to
delete the manifest file.
- Error : The error event used to
show the error of the manifest file.
Step 2 : Open Notepad
- Click->Start button->Notepad
- Give the file a name of your choice
- Click New button->save
- There the name is "Jackson.html"
![notepad.gif]()
Step 3 : Create a Folder in save application
- Right click of Desktop Screen-> New-> Folder
- Name of Folder is "hunter"
- Finally all HTML files and related sources are
saved in that folder
![folder.gif]()
Step 4 : Section of Cache manifest file
CACHE :
section header are explicitly cached after they are downloaded for the first
time.NETWORK :
section header in the cache manifest file are
white listed resources that require a connection to the server.FALLBACK :
section specifies fallback pages the browser
should use if a resource is inaccessible
Step 5 :
The extinction of the manifest file is
Extinction is a ".appcache".
Always set the header section.
<html
manifest="Tom.appcache">
Step 6 : Create the simple
manifest file
Code
<html
manifest="Tom.appcache">
<head>
<title>Tom</title>
<script
src="Tom.js"></script>
<link
rel="stylesheet"
href="Tom.css">
</head>
<body>
<p>Diaply
the Time: <output
id="clock"></output></p>
</body>
</html>
Step 7 : Provide the resources .
Code
output
{ font: 2em sans-serif; }
Step 8 : Provide the second
resources of our application
Code
setTimeout(function
() {
document.getElementById('clock').value =
new Date();
"}, 1000);
Step 9 :
The complete application is given below
Code
<!-- Tom.html -->
<!DOCTYPE
HTML>
<html
manifest="TOm.appcache">
<head>
<title>Tom</title>
<script
src="Tom.js"></script>
<link
rel="stylesheet"
href="Tom.css">
</head>
<body>
<p>Diaply
the Time: <output
id="clock"></output></p>
</body>
</html>
</* Tom.js */>
setTimeout(function
() {
document.getElementById('clock').value =
new Date();
"}, 1000);
</*
Tom.css */>
output { font:
2em sans-serif; }
Step 10 : Run the code in browser
Output
![Clipboard01.gif]()
Resource