HTML5 Application Cache.
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/

28 comments:

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

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

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

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

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

    ReplyDelete
  6. what happen if browser do not support html 5 ?

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

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

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

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

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

    ReplyDelete
  12. Good work, Please continue the good work.

    ReplyDelete
  13. great info.. Kudos to the team.

    ReplyDelete
  14. 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
  15. This tutorial is really useful for me, thank you.

    ReplyDelete
  16. now I am able to understand , Thanks !

    ReplyDelete