Access Offline Web Project – HTML5 Application Cache

This Tutorial Explain how user can access any web system with out any internet connections. This is done by using HTML5 Cache mechanism.

In this blog explains how to develop a offline web project using HTML5 application cache. Most of the latest browsers have caching mechanisms, this gives three advantages reducing server load, increases web page speed and office access specially for gaming website.

For this , there are mainly needed is Manifest File. This file have total 3 parts,
CACHE MANIFEST, NETWORK and FALLBACK. You can create this simple text file using notepad with extension filename.appache

CACHE MANIFEST

List all the files what exactly you want to be cached under the browser mainfest.

  • Index.html
  • Style.css
  • logo

NETWORK

Sometimes the webpage strongly required internet access to call APIs, in such a case we need to keep resource urls under this header.

Chrome
NETWORK:
*

Firefox needs arbitrary urls instead of asterisk (*)
NETWORK:
http:// * , https:// * 

Index.html

Include Mainfest.appache

 <!doctype html>
<html  manifest="mainfest.appcache">
<head>
<title>Your Page Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div><img src="logo.png" /></div>
<a href="file.php">Click Here For Access File Without Internet</a>
</body>
</html> 

This index,html file is an example for access file without any internet connection. Output of the file when we click on link with out connection it can open. file.php is a server file.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *