Create Cache Manifest Using HTML 5 Tools


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 .

  • 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

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

  • C:\Users\<username>\AppData\Local\Mozilla\Firefox\Profiles\<salt>.<profile name>\OfflineCache.

  • This is  the location for storing the manifest file.

Output

Clipboard01.gif


Resource

Up Next
    Ebook Download
    View all
    Learn
    View all