[ACCEPTED]-Good tutorial for using HTML5 History API (Pushstate?)-html5-history

For a great tutorial the Mozilla Developer 14 Network page on this functionality is all 13 you'll need: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Unfortunately, the HTML5 History 12 API is implemented differently in all the 11 HTML5 browsers (making it inconsistent and 10 buggy) and has no fallback for HTML4 browsers. Fortunately, History.js provides 9 cross-compatibility for the HTML5 browsers 8 (ensuring all the HTML5 browsers work as 7 expected) and optionally provides a hash-fallback 6 for HTML4 browsers (including maintained 5 support for data, titles, pushState and 4 replaceState functionality).

You can read 3 more about History.js here: https://github.com/browserstate/history.js

For an article 2 about Hashbangs VS Hashes VS HTML5 History 1 API, see here: https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling

I benefited a lot from 'Dive into HTML 5'. The 3 explanation and demo are easier and to the 2 point. History chapter - http://diveintohtml5.info/history.html and history demo 1 - http://diveintohtml5.info/examples/history/fer.html

Keep in mind while using HTML5 pushstate 8 if a user copies or bookmarks a deep link 7 and visits it again, then that will be a 6 direct server hit which will 404 so you 5 need to be ready for it and even a pushstate 4 js library won't help you. The easiest solution 3 is to add a rewrite rule to your Nginx or 2 Apache server like so:

Apache (in your vhost 1 if you're using one):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

Nginx

rewrite ^(.+)$ /index.html last;

The HTML5 history spec is quirky.

history.pushState() doesn't dispatch a popstate event 11 or load a new page by itself. It was only 10 meant to push state into history. This is 9 an "undo" feature for single page 8 applications. You have to manually dispatch 7 a popstate event or use history.go() to navigate to the new 6 state. The idea is that a router can listen 5 to popstate events and do the navigation for you.

Some 4 things to note:

• history.pushState() and history.replaceState() don't dispatch popstate events.
• history.back(), history.forward(), and the browser's back and forward buttons do dispatch popstate events.
• history.go() and history.go(0) do a full page reload and don't dispatch popstate events.
• history.go(-1) (back 1 page) and history.go(1) (forward 1 page) do dispatch popstate events.

You can use the history API 3 like this to push a new state AND dispatch 2 a popstate event.

history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));

Then listen for popstate events 1 with a router.

You could try Davis.js, it gives you routing in 3 your JavaScript using pushState when available 2 and without JavaScript it allows your server 1 side code to handle the requests.

Here is a great screen-cast on the topic 3 by Ryan Bates of railscasts. At the end 2 he simply disables the ajax functionality 1 if the history.pushState method is not available:

http://railscasts.com/episodes/246-ajax-history-state

I've written a very simple router abstraction 12 on top of History.js, called StateRouter.js. It's in very 11 early stages of development, but I am using 10 it as the routing solution in a single-page 9 application I'm writing. Like you, I found 8 History.js very hard to grasp, especially 7 as I'm quite new to JavaScript, until I 6 understood that you really need (or should 5 have) a routing abstraction on top of it, as 4 it solves a low-level problem.

This simple 3 example code should demonstrate how it's 2 used:

var router = new staterouter.Router();
// Configure routes
router
  .route('/', getHome)
  .route('/persons', getPersons)
  .route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();

Here's a little fiddle I've concocted in 1 order to demonstrate its usage.

You may want to take a look at this jQuery 2 plugin. They have lots of examples on their 1 site. http://www.asual.com/jquery/address/

if jQuery is available, you could use jQuery BBQ

0