Thursday 13 June 2013

Magic of HTML 5's Offline Storage Specification: A Website That Runs Without an Internet Connection!

Have you ever browsed a website offline(i.e. without an Internet connection) without downloading the page beforehand ? Here is such a website which runs only without the Internet Connection.
And that website is www.allaboutrajni.com .

Let us see how this works...

Step 1: Open  www.allaboutrajni.com when the internet is connected and you'll get the following :

             

Wierd! this page says that "THE ONLY WAY TO ENTER THIS WEBSITE IS BY SWITCHING OFF YOUR INTERNET."

Okay lets try it out in Step 2.

Step 2: Now let us Disconnect our internet connection. A HOW TO is also shown in the website.


After disconnecting ..

Step 3: After disconnecting the internet connection we get the page

As we see, immediately after disconnecting from the internet we get a new page

In the new page we get a link to enter the page. Let's see what happens on clicking it!


Surprised! Actually the webpages are loading dynamically from the server even without an Internet Connection! 
And this page is in the TAMIZH language(Spoken throughout Southern India) and it says 
"Hey Dude! Welcome .. Now that you have no internet welcome welcome! Pick one, Read on, dude "

Macha is a Tamizh words which means "Dude" in english.


Let's click on THE LEGEND and see what happens, we get


Okay, we get some information about Rajni Kanth

Good going, so what happens when we turn on our internet connection while browsing the page ?
lets move this to step 4.

Step 4: Noe let us connect our internet while still browsing the internet and see what happens,


This page says, "Damn, this was unexpected. To keep browsing switch off your Internet."

AMAZING!




Let us now understand the working behind this,

The website is based on a complex algorithm running in the back-end that keeps an eye on the propagation of data packets between two terminals. Magic kicks in soon as the Internet speed is down to zero, which is the basic premise on which the site and the concept has been constructed.

Its all through the HTML 5's Offline Storage specification. 

All the files required for displaying the webpage are downloaded and stored locally on the user's computer through means of a cache manifest file. When the  internet connection is lost, the user is still able to view the webpage as he has a local copy of the files. More information regardingthe offline storage specification can be found at http://www.html5rocks.com/en/tutorials/offline/whats-offline/


Information about RajniKanth (famously called as Super Star) for those who are not aware of him:

Mr. Rajni Kanth is the Super Star of Southern India. He started his career as a Bus Conductor and then shined the Tamizh cinema industry. He has a huge number of fans all over the world. He does extraordinary things!

To show the gratitude (by his fans) to the Super Star the fans have made an attempt to create an
Extra-ordinary website like www.allaboutrajni.com for the Super Star to show his power to the website!

A great Attempt! 

Hats-off to the developer!