Create Cache Manifest Using HTML 5 Tools

Manish Singh
12y
14k
0
0

Article

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"

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

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.

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 .

Create Tom.css file.

Code output { font: 2em sans-serif; }

Step 8 : Provide the second resources of our application

Create the Tom.Js file.

Code setTimeout(function () {
document.getElementById('clock').value = new Date();
"}, 1000);

Step 9 : The complete application is given below

Code


<!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>