HTML5 Application Cache.
Wall Script
Wall Script
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
 
Email  : arunfairy[at]hotmail.com

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/
web notification

27 comments:

  1. UnknownMarch 25, 2013 at 6:16 AM

    thanks man!

    ReplyDelete
  2. UnknownMarch 25, 2013 at 6:18 AM

    nice one and great

    ReplyDelete
  3. iRvanFauziEMarch 25, 2013 at 7:06 AM

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

    ReplyDelete
  4. Deepak KamatMarch 25, 2013 at 7:25 AM

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

    ReplyDelete
  5. AlexanderMarch 25, 2013 at 7:25 AM

    Wow! Nice post! Thanks Arun!

    ReplyDelete
  6. UnknownMarch 25, 2013 at 8:46 AM

    nice post

    ReplyDelete
  7. AnonymousMarch 25, 2013 at 4:52 PM

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

    ReplyDelete
  8. AndroidSEMarch 25, 2013 at 6:37 PM

    This is great tutorial :)

    ReplyDelete
  9. Pawan MallMarch 25, 2013 at 9:52 PM

    wow awesome man :)

    ReplyDelete
  10. ninoopMarch 26, 2013 at 2:18 AM

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

    ReplyDelete
  11. UnknownMarch 26, 2013 at 4:42 AM

    Very Impressive....

    ReplyDelete
  12. prabhuMarch 26, 2013 at 4:55 AM

    well done...

    ReplyDelete
  13. Alex VallsMarch 26, 2013 at 5:14 AM

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

    ReplyDelete
  14. UnknownMarch 27, 2013 at 3:49 AM

    what happen if browser do not support html 5 ?

    ReplyDelete
  15. mikeMarch 28, 2013 at 11:02 AM

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

    ReplyDelete
  16. cakephp developmentApril 3, 2013 at 3:01 AM

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

    ReplyDelete
  17. Bisnis PulsaApril 4, 2013 at 9:44 AM

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

    ReplyDelete
  18. AnonymousApril 19, 2013 at 2:44 PM

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

    ReplyDelete
  19. netpreneur blogApril 24, 2013 at 2:36 PM

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

    ReplyDelete
  20. mobile smsMay 1, 2013 at 5:56 AM

    thank for this article

    ReplyDelete
  21. FrankMay 8, 2013 at 9:12 AM

    Good work, Please continue the good work.

    ReplyDelete
  22. Gagan MasounJuly 26, 2013 at 6:34 AM

    Wonderful job.!! Keep it up sir

    ReplyDelete
  23. ex-ssilApril 29, 2014 at 3:28 PM

    great info.. Kudos to the team.

    ReplyDelete
  24. UnknownMay 26, 2014 at 1:10 PM

    I have been using seositecheckup

    i keep getting failed for cache

    this is what i have got from your tutorial

    in all pages wanting to be cached

    then

    in my cache.appcache

    CACHE MANIFEST
    #26/05/2014 v1.0

    CACHE:
    index dot html (auto blocks coding)

    then in my .htaccess


    AddType text/cache-manifest .appcache
    # Cache Images and Fonts for 1 Year

    Header set Cache-Control "max-age=29030400, public"


    but still returning as a failed

    have i done something wrong as just started html5 and this is confusing me tried several ways .manifest prior to finding this great post.

    Thanks in advance
    Rob

    ReplyDelete
  25. numpang iklanMay 13, 2015 at 8:46 AM

    This tutorial is really useful for me, thank you.

    ReplyDelete
  26. Beli pulsa onlineAugust 12, 2015 at 5:44 AM

    now I am able to understand , Thanks !

    ReplyDelete
  27. saurabh chadhaNovember 15, 2016 at 7:38 PM

    how long app cache will be supported by chrome , firefox , opera as service workers are there ? any knowledge about this ?

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X