QuickTip : HTML5 Offline Access

Hey everybody !

This is a small tutorial on how to get an offline access on your website using HTML5 ! Meaning even when you bring the website down, your users can see your webpages !

 

Now, Shall we begin !

I have just two documents : index.phpstyle.css ( just a basic example !)

We Are not going to talk about the stysheet, we don’t actually need it ;)

Now, in the index.php I have just a basic structure  :

DOCTYPE html>
<html lang='en' manifest='cache.manifest'>
My First Caching System !
</head>
<body>
<br />

This is my first HTML5 Caching System


</body>
</html>

No Notice the “Manifest” in the html tag

It’s basicly a file named “Cache.manifest“, yes, it’s extension is .manifest
That file is going to have this structure :

CACHE MANIFEST
# version 0.1
index.php
style.css

 

No, your cache.manifest Should contain all the documents names that you want to keep even whene you bring down the server in place of my index.php and style.cssfiles

Example : if you have 5 pages on your server called ‘index.php’, ‘contact.php’, ‘faq.php’, ‘about.php’, ‘register.php’ (including a stylesheet), teh your cache.manifest is going to have this structure :

CACHE MANIFEST
# version 0.1
index.php
contact.php
faq.php
about.php
register.php
style.css

Notice That evry page name have it’s own line, and if you want to add some page in it, just add the file after the style.css ;)

Now, by default, the apache server deos not know files with a “manifest” extension so, you probably gess it, An .htaccess file will solve our problem !
Creat a file named : .htaccess, and add the following
line, and save it in the same directory that you have your pages and the cache.manifest in it :

AddType text/cache-manifest manifest

Now, you’ll have an offline access to your users, cool Hun ?

The only problem is that this Method deosn’t work with IE 6, 7 And 8

 

Enjoy :D

 

boar bristle


Related Blogs


    Leave a Reply

    You might also likeclose
    %d bloggers like this: