Like @Carl, I have implemented a stand-alone implementation of pushState + AJAX navigation, see HTMLDecor.
The philosophy of PJAX is:
- a page consists of unique content + site decor (banners, nav, ads, stylesheets, etc).
- when a user first visits a site, send a complete page.
- when the user navigates to a new page in the site just send the unique content, not the complete page. (Although PJAX can be configured to extract the unique content from a complete page).
The philosophy of HTMLDecor is:
- a page consists of unique content + a
<link>
to the site decor + the HTMLDecor.js
script.
- when a user first visits a site, send the page (mostly unique content).
In the browser, HTMLDecor examines the
<link>
, fetches the site decor and merges it with the page.
- when the user navigates to a new page, the page is already the unique content, so send it as is.
HTMLDecor will update the unique content of the page and call
pushState()
to update the URL.
In other words, put all the site decor in a separate file and let HTMLDecor.js
merge it with the unique content in the browser. After that, pushState support comes for free - you don't need to configure anything.
HTMLDecor.js
is only 6kB when minified and gzipped, which is small compared to most js frameworks.
You could (should) leave RightJS out of your normal pages (which should only contain unique content) and only place it in the site decor page.
Probably this all makes more sense if you see a demo of HTMLDecor. Look at my blog. If you view the page source you will see that the ad at the top of the page, the navbar at the bottom, and the contact popup aren't part of the page source. They are all added with AJAX.
When you navigate to one of the blog articles, pushState + AJAX is used (if supported on the browser), and you see that the ad and navbar aren't refreshed.
There is also an article which introduces HTMLDecor in more detail.