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
Step 2 : Open Notepad
notepad.gif
Step 3 : Create a Folder in save application
folder.gif
Step 4: Section of Cache manifest file
Step 5 : The extinction of the manifest file is
  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.
Code
  1. output { font: 2em sans-serif; }
Step 8: Provide the second resources of our application
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 */>
  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
Output
Clipboard01.gif
Resource