Question

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 bookmark somewhere, what’s the point? My real question is — how do you set up a web server so that, regardless of the address entered, it loads only one web application (leaving the address intact so that I can then reference it using JavaScript to load relevant content)?

So, I could then use the History API to display the appropriate address and then have that bookmark actually work when the user returns later to the site.

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