Implementing HTML5 Application Cache.

Are you working with HTML5, then take a quick look at this post that explains how to develop an 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 a gaming website.

Manifest File

The manifest file contains three parts CACHE MANIFEST, NETWORK, and FALLBACK. You can create this simple text file using notepad with extension filename.appcache

CACHE MANIFEST

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

CACHE MANIFEST
index.html
style.css
logo.png

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:// *

FALLBACK

If you want to display some special no internet page like 404, keep the file or URL under this header.

FALLBACK:
/ no-internet.html

mainfest.appcache

CACHE MANIFEST
index.html
style.css
logo.png

FALLBACK:
/ no-internet.html

NETWORK:
*

.htaccess

Few servers are not supporting .appcache file type extension, include this file for better result.

AddType text/cache-manifest .appcache

index.html

Include mainfest.appcache

<!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">Required Internet Access</a>
</body>
</html>

Application Cache Clear in Chrome

chrome://appcache-internals/

Implementing HTML5 Application Cache.

You might also like