The HTML5 history API is a standardized way to manipulate the browser history via script.The new parts in HTML5 include a way to add entries to the browser history, to visibly change the URL in the browser location bar (without triggering a page refresh), and an event that fires when those entries are removed from the stack by the user pressing the browser’s back button. This session would help learn more about HTML5 History API.

1. HTML5 History APIHTML5 History API

2. About Me
Connect Me
Facebook : https://www.facebook.com/majuansari
LinkedIn: http://in.linkedin.com/pub/maju-ansari/32/1a0/359/
Twitter: https://twitter.com/majuansari
Google+ : https://plus.google.com/112221894604861593451
Contact Me
Email : majua@mindfiresolutions.com
Skype: mfsi_majua
OCA-1z0-870 - MySQL 5 - Certified
Programmer
Skills : php, jQuery,
Ajax,nodeJs,phantomJs,raphaelJs,Dr
upal, Symphony,Codeigniter

3. Web StateWeb State
Stateful and statelessStateful and stateless
Web Pages/Applications are Stateful?Web Pages/Applications are Stateful?
The back & forward buttons in the browserThe 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 ofSearch engine crawlers take a snapshot of
each possible state, and indexes themeach possible state, and indexes them

4. AJAXAJAX Breaks ThisBreaks This

5. How AJAX breaks stateHow AJAX breaks state
The back & forward buttons no longer behave asThe 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

6. Solution?Solution?

7. Hack the # AnchorHack the # Anchor
Lots 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.

8. Problems?!!Problems?!!

9. 
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.

10. BetterBetter Solution?Solution?

11. HTML5 History APIHTML5 History API

12. 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

13. 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);

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

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

16. Life CycleLife Cycle

17. MoreMore
Problems?!!Problems?!!

18. Browser SupportBrowser Support

19. history.jshistory.js
HTML5 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

20. DemoDemo

21. Thats It!Thats It!
QUESTIONS ?QUESTIONS ?