Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State of the Web

Keith Pitt
January 20, 2011

The State of the Web

In this presentation, I talk about the HTML5 History API

Keith Pitt

January 20, 2011
Tweet

More Decks by Keith Pitt

Other Decks in Programming

Transcript

  1. Web State Web Pages/Applications are Stateful The back & forward

    buttons in the browser traverse state The URL is a link to the state Search engine crawlers take a snapshot of each possible state, and indexes them
  2. How AJAX breaks state The back & forward buttons no

    longer behave as expected Links no longer work correctly Search engines can no longer crawl
  3. Hack the # Anchor Lots of ugly hacks, especially in

    IE where we need to use an iFrame.
  4. HTML5 History API 2 new methods: pushState replaceState 1 new

    event on the window object: onpopstate
  5. pushState // 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: 'keithpitt' }; // 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);
  6. jQuery Address HTML5 History API where supported. Reverts back to

    the # Anchor hack. Works in IE6 http://www.asual.com/jquery/address/