Wednesday, September 15th, 2010

pushState + node.js on the Server Side

Category: Node

<p>pushState is a nifty way to manipulate browser history state without having to mess with the #hash value. You can use this to change the full path portion of the URL:

javascript
< view plain text >
  1. var stateObj = { foo: "bar" };
  2. history.pushState(stateObj, "page 2", "bar.html");

This would change the URL bar to http://example.com/bar.html without forcing the page to reload, allowing full JavaScript applications on the client-side. This is supported in Firefox 4, Safari, and Chrome.

Ben Nolan has been doing some interesting work exploring using pushState + JQuery but on the server-side using node.js in order to get the advantages of pushState while still being search-engine and accessibility friendly:

The number one downfall of javascript apps, is that there are now pages in your app that can’t be linked to – nor can they be crawled by google, or scraped by any other site that uses the http protocol. Building exciting new apps that ‘break the internet’ isn’t cool.

But if you can run your entire app on the server side – then if someone goes to http://yourapp.com/search/myterms – node.js can load your page on the server, recognize the url, run the correct javascript code to update the state as the browser would – then send it down the wire. So that non-javascript clients can access the same content that a desktop browser can.

Related Content:

Posted by Brad Neuberg at 7:00 am
7 Comments

+++--
3.7 rating from 6 votes

7 Comments »

Comments feed TrackBack URI

Browser Support: Firefox 4, Chrome 6, Safari 5, Mobile Safari on iOS 4+ (!)

Comment by cpojer — September 15, 2010

Glen Murphy (Chrome Design Engineer at Google), took advantage of the pushState in a nice example he created 2months ago, take a look how pushState works. Pretty cool!
http://bodytag.org/rollstate/

Comment by MohamedMansour — September 15, 2010

@MohamedMansour – The demo maybe cool, but it broke the Back button behavior. The history is much longer than the links you have clicked, so it broke user experience.

Comment by ragjunk — September 15, 2010

Maybe I overlooked something, bug what’s the point?? I think its pretty ugly wrong approach.

Comment by steida — September 15, 2010

@steida I think the point is to be able to make rich HTML5 + JavaScript applications without loosing support for non-javascript user agents and to avoid redoing much of the work in the server.

Comment by alcuadrado — September 15, 2010

Please post an article if you have a good demo. No, http://bodytag.org/rollstate/ is not a good demo.

Comment by edwinm — September 16, 2010

@edwinm Please, no snide remarks on other users here on Ajaxian. Let’s keep the conversation respectful and fact based.

Comment by Brad Neuberg — September 16, 2010

Leave a comment

You must be logged in to post a comment.