9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Monday, March 25, 2013

HTML5 Application Cache.

Are you working with HTML5, then take a quick look at this post that 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.

HTML5 Application Cache.


Download Script
     Live Demo    Live Demo Egglabs.in

Developer
Arun Kumar Sekar
Arun Kumar Sekar

Engineer, Plugin Expert
Chennai, INDIA

Take a look at this demo, how HTML5 application works.


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 mainfest.
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/
Comments
{ 24 comments }
Tây Nguyên said...

thanks man!

Solomon David said...

nice one and great

iRvanFauziE said...

then how to:
1. get our Offline files (file path/address)?
2. check if our offline files is exist?

Deepak Kamat said...

It would have been great if appcache was available without any back-end settings.

Alexander said...

Wow! Nice post! Thanks Arun!

Ajay Surya said...

nice post

Anonymous said...

Where's the Version?
And why don't you use blablabla.manifest instead of Manifest.appache?

AndroidSE said...

This is great tutorial :)

Pawan Mall said...

wow awesome man :)

ninoop said...

thanks man! check this out http://smeeklabs.tk/

Krishnakant Prabhu said...

Very Impressive....

prabhu said...

well done...

Alex Valls said...

Seems to be an error in index.html code, should be manifest.appcache instead of mainfest, isn't it?

Amir Modiri said...

what happen if browser do not support html 5 ?

mike said...

Well this article gave me more ideas about using HTML 5, I'm using this code for my new project.

Balaji said...

nice post...

cakephp development said...

Great post with full of information where easy understandable language put plus points in it..

Bisnis Pulsa said...

great tutorial...man..!! Ok, Support U...!!! Thanks..!

Anonymous said...

i opened the .htaccess file in notepad how i put it back in its original mode of window common dll

netpreneur blog said...

wow amazing i like this tutorial, this vry awsome thanks, now i get the solution for my apps

mobile sms said...

thank for this article

Frank said...

Good work, Please continue the good work.

Gagan Masoun said...

Wonderful job.!! Keep it up sir

hima javvadhi said...

thanks a lot

Post a Comment