Create gmail like app using html5 history api and hashbang

Today i solved one mystery which was bouncing around in my mind since the day i saw gmail. How come google guys handle all the gmail operations without refreshing the page even once ? I was under impression that this should be something divine, like i was thinking about one of the facebook’s script, add friends to the list. In case of facebook it was sight cheating but in case of google its not sight cheating its purely a technology, no doubt about it. I was expecting that google guys might have written some javascript compiler or something huuuuge for manipulating gmail and other things, but when i read about HTML5 i came to know the secret behind gmail’s no-refresh concept. Gmail is taking good advantage of javascripts onhashchange event and newly launched HTML5’s History API. Lets reveal the secret behind <h2>”create gmail like app using html5 history api and hashbang”.</h2>
    Same thing can be achieved with Ajax but there are few drawbacks of using ajax, so to achieve the same effect we might need to code more lines of code. 2 main drawbacks of ajaxthat can create headache for us.1) Ajax requests did not automatically register themselves with the browser’s history engine, so clicking the browser’s “back” button may not have returned the browser to an earlier state of the Ajax-enabled page, but may have instead returned to the last full page visited before it.
2) Dynamic web page updates also make it difficult to bookmark and return to a particular state of the application.To overcome these drawbacks HTML5 has introduced History API

Second this that we need to know about is hashbang urls (aka hashtag) Hashtag is the backbone of many famous web apps like Google Analytics and well known application twitter. Have you noticed urls like https://twitter.com/#!/amitspatil, https://twitter.com/#!/following, https://twitter.com/#!/followers etc.

create gmail like app using html5 history api and hashbang

gmail html5 history api hashbang

gmail html5 history api hashbang 1

Ok, I stop explaining the things (go to the bottom and find more links to study HTML5 history API and hashtags) lets come to the topic, and lets create gmail like app using html5 history api and hashbang. Here i am posting code that we have used to create gmail like app using html5 history api and hashbang.

Note : This demo “create gmail like app using html5 history api and hashbang” is only supported in major browsers which supports HTML5.

 

View Demo

 

More References for HTML5 history API and Hashbang (Hashtag)

1) Manipulating the browser history
2) Introducing the HTML5 History API
3) window.onhashchange
4) Intelligent State Handling

About the author

Amit

Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 7+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

33 Comments

Leave a Comment


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.