HTML5 History APIHTML5 History API

About Me

Connect Me Facebook : https://www.facebook.com/majuansariLinkedIn: http://in.linkedin.com/pub/maju-ansari/32/1a0/359/Twitter: https://twitter.com/majuansariGoogle+ : https://plus.google.com/112221894604861593451

Contact Me Email : majua@mindfiresolutions.comSkype: mfsi_majua

OCA-1z0-870 - MySQL 5 - Certified Programmer Skills : php, jQuery, Ajax,nodeJs,phantomJs,raphaelJs,Drupal, Symphony,Codeigniter

Web StateWeb State

Stateful and statelessStateful and stateless

Web Pages/Applications are Stateful?Web Pages/Applications are Stateful?

The back & forward buttons in the browser The back & forward buttons in the browser traverse statetraverse state

The URL is a link to the stateThe URL is a link to the state

Search engine crawlers take a snapshot of Search engine crawlers take a snapshot of each possible state, and indexes themeach possible state, and indexes them

AJAXAJAX Breaks ThisBreaks This

How AJAX breaks stateHow AJAX breaks state

The back & forward buttons no longer behave as The back & forward buttons no longer behave as expectedexpected

Links no longer work correctlyLinks no longer work correctly

Search engines can no longer crawlSearch engines can no longer crawl

Solution?Solution?

Hack the # AnchorHack the # AnchorLots of ugly hacks, especially in IE whereLots of ugly hacks, especially in IE where

we need to use an iFrame.we need to use an iFrame.

Problems?!!Problems?!!

There are now two urls for the same content

http://mywebsite.com/page1 and http://mywebsite.com/#!/page1

URLs get polluted if we did not start on the home page

http://mywebsite.com/page1#!/page2

JS-disabled user will not get the right page.

Performance and experience issues when a hashed url is loaded.

Better Better Solution?Solution?

HTML5 History APIHTML5 History API

HTML5 History APIHTML5 History API

2 new methods:2 new methods:

pushStatepushState

replaceStatereplaceState

1 new event on the window object:1 new event on the window object:

onpopstateonpopstate

pushStatepushState// This object is passed to the onpopstate event when it is fired. You// can fill this object with what ever you like.var stateObject = { title: 'This Awesome Post', createdAt: '2010-10-10', author: 'MF'};

// At the moment, most browsers are ignoring this property, so just fill it with// the title of the new page. According to Firefox, they _may_ use it in The // future.var title = 'This Awesome Post';

// The full URL of the new page.var url = '/posts/this-awesome-post';

history.pushState(stateObject, title, url);

replaceStatereplaceStateSame API as Same API as pushStatepushState, but doesn’t add , but doesn’t add anything to the history stack.anything to the history stack.

onpopstateonpopstate

$(window).bind('popstate', function(event) { alert('State Changed!');})

Life CycleLife Cycle

More More Problems?!!Problems?!!

Browser SupportBrowser Support

history.jshistory.jsHTML5 History API is supported.HTML5 History API is supported.

Reverts back to the # Anchor hack.Reverts back to the # Anchor hack.

https://github.com/browserstate/history.jshttps://github.com/browserstate/history.js

DemoDemo

Thats It!Thats It!

QUESTIONS ?QUESTIONS ?