Question

I’m trying to wrap my head around using HTML5 pushState. It seems to work great. I can add states, go back with my browser and everything looks fine. However, when I refresh the page, it leads to a 404, because the URL that was appended with pushState doesn’t actually exist…

I am trying to get everything to load from a single folder with an index.html page, so the URL would look something like http://www.server.com/app_name/<something> (app_name is a folder with an index.html file).

As far as I could gather, hashbang is considered bad, so what pushState URLs can / should I use that will stay on the same actual page and allow me to refresh?

And after refreshing, would I still be able to retrieve the state?

p.s. I am not concerned about browsers without javascript enabled or maintaining backwards compatibility. I do not want to change any .htaccess rules to make this portable and configuration-free.

Answer 1

I ended up giving up on pushState, and instead used BBQ jQuery plugin.

The code looks something like this:

$(document).ready(function() {
  // making sure a hashchange event is triggered for refresh
  $(window).trigger('hashchange');
});

// this gets called on any page change, back button etc                                                                                                                                                                                                                                             
$(window).bind( 'hashchange', function(e) {
  // the fragment contains a hash value at the
  // end of the url, e.g. #xyz
  var url = $.param.fragment();
  // simulating a click on the appropriate link on the page
  // based on the fragment
  $('.panel a[href="#' + url + '"]').click()
});

URLs on the page are in this format:

<a href="#xyz">link to xyz</a>