title: Cross-browser jquery ajax history with window.history.pushState and fallback
body: <p>I want to implement a navigation history using jQuery and AJAX in a cross-browser manner. My approach is to use <code>window.history.pushState</code> and fall back to a hash url <code>/#!/url</code> in browsers that do not support <code>window.history.pushState</code>. </p>
  
  <p>For example:</p>
  
  <pre><code>&lt;a href="/home"&gt;home&lt;/a&gt;
  &lt;a href="/about"&gt;about&lt;/a&gt;
  &lt;a href="/contact"&gt;contact&lt;/a&gt;
  </code></pre>
  
  <p>On browsers that support <code>window.history.pushState</code>, clicking on one of these links should change address without page refresh to <a href="http://domain.com/home">http://domain.com/home</a>, <a href="http://domain.com/about">http://domain.com/about</a> etc. When the browser does not support <code>window.history.pushState</code>, it should use a fragment identifier, i.e: <a href="http://domain.com/#!/home">http://domain.com/#!/home</a>, <a href="http://domain.com/#!/about">http://domain.com/#!/about</a>.</p>
  
  <hr>
  
  <p>Update: Based on the feedback here I have implemented <a href="http://lab.laukstein.com/ajax-seo/">Ajax SEO</a> (<a href="https://github.com/laukstein/ajax-seo">git</a>) that uses 
  <a href="http://www.asual.com/jquery/address/samples/express/">jQuery Address</a> for HTML5 History API with old browser fallback to <code>/#!/url</code>.</p>