HTML5 History API And Bookmarking

What's the point of using the History API if the URLs that it creates aren't 'real' URLs? Sure I can pushState as much as I want, but if I can't then include one of these URLs as a

Solution 1:

There's nothing fake about the URLs created from the history API. You simply need to handle them properly when visitors use them to load the entire page (via an external hyperlink or bookmark or what-not). You can either do this on the client side or the server side.

Handling the URLs server side will, of course, depend entirely on how you're developing your application and is a bit out of scope for this question.

On the client side, however, you'd have JavaScript parse the URL and then respond accordingly. I personally find the jQuery Address plugin very good for this.

Include the plugin like so, including an absolute path to the root of your application with the state argument:

<script type="text/javascript" src="jquery.address-1.3.min.js?state=/absolute/path/to/your/application"></script>

Then you'd have jQuery.address parse the URL when the page loads and the DOM is ready:

// Handle the initial load and make the page look the way it's supposed to
$.address.init(function(e) {
    // Address and path details can be found in the event object.
    // Explore it a bit via console.log()
    console.log(e);
});

For a good, working example I recommend viewing the source of this jQuery.address example as well as the jQuery.address docs.

Solution 2:

Take advantage of the standard organization within URLs. Encode your state information in the query, which can be processed by client and server scripts, but always use the same base URL that points to your web application.

Solution 3:

If you're using Apache, with mod_rewrite you can direct however many URLs you want to the same resource on your server. That resource would then have to inspect the URL and dynamically create the page in the correct state, whether that is done server side or client side is up to you.

Solution 4:

If you aren't using a MVC framework, you can use .htaccess to handle this as @nwellcome mentioned :

# html5 pushstate (history) support:
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

source : HTML5 History / pushState URLs, .htaccess and You