Post
Ask Question

Create Cache Manifest Using HTML 5 Tools

Introduction

 
This is a simple application showing how to create an application cache using the HTML 5 tools. The application cache is used to store 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 is 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 new changes in a manifest file.
  • Noupdate : This event shows 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 whitelisted 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.
  1. <html manifest="Tom.appcache">  
  2. strong>  
Step 6: Create a simple manifest file
 
Code
  1. <html manifest="Tom.appcache">  
  2.     <head>  
  3.         <title>Tom</title>  
  4.         <script src="Tom.js"></script>  
  5.         <link rel="stylesheet" href="Tom.css">  
  6.         </head>  
  7.         <body>  
  8.             <p>Diaply the Time:   
  9.                 <output id="clock"></output>  
  10.             </p>  
  11.         </body>  
  12.     </html>  
Step 7: Provide resources.
  • Create Tom.css file.
Code
  1. output { font: 2em sans-serif; }  
Step 8: Provide the second resources of our application
  • Create the Tom.Js file.
Code
  1. setTimeout(function () {  
  2.    document.getElementById('clock').value = new Date();  
  3.  "}, 1000);  
Step 9 : The complete application is given below
 
Code
  1. <!DOCTYPE HTML>  
  2. <html manifest="TOm.appcache">  
  3.     <head>  
  4.         <title>Tom</title>  
  5.         <script src="Tom.js"></script>  
  6.         <link rel="stylesheet" href="Tom.css">  
  7.         </head>  
  8.         <body>  
  9.             <p>Diaply the Time:   
  10.                 <output id="clock"></output>  
  11.             </p>  
  12.         </body>  
  13.     </html>  
  14. </* Tom.js */>  
  15.   
  16. setTimeout(function () {  
  17.    document.getElementById('clock').value = new Date();  
  18.  "}, 1000);  
  19. undefined</* Tom.css */>  
  20. 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


Similar Articles