Tutorial: Single Page Interface SEO Compatible Web Site With ItsNat STATEFUL Using History API
Last update: 2015, Sept. 27
This tutorial shows the History API SPI web site version of the stateful using hashbangs tutorial, reading the hashbang version first is highly recommended, main ItsNat concepts are not going to be repeated in this tutorial and some parts of this version are identical to the hashbang based.
The objective of this tutorial is to make a Single Page Interface Stateful SEO Compatible using History API.
To understand this tutorial some basic knowledge of ItsNat is required.
The only caveat of History API is browser support, some old browsers like IE until v10 do not support this specification. This is not a problem, this tutorial shows how we can run the same website in browsers with no History API support just accepting conventional page navigation for fundamental states in these old browsers. In summary if you want pure SPI SEO compatible on virtually any browser use hashgbangs, if you want perfect SPI SEO compatible use History API as shown in this tutorial accepting the experience is not the best (page based) in old browsers (going to disappear anytime soon).
SPI, SEO compatiblity and History API
SPI SEO compatiblity is really easy using History API (and ItsNat), using History API we can change the URL of the current page with no reload, period, by this way end users "see" the browser URL changing and the page content changing in the same time, but the content changed can be done with partial changed drived by an AJAX event instead of conventional page loading. End users just feel how much the experience is improved (better performance, no blank flash when switching pages...). Because the new URL is pretty and conventional (no hashbangs are used), it can be bookmarked, if you are able to load the correct initial page when a concrete URL is manually written in your browser, everything is done, no _escaped_fragment_ trick is necessary, web crawlers see your site as a conventional paged site.
Web application set-up
ItsNat does not require special set up or application servers, any servlet container supporting Java 1.6 or upper is enough. Use your preferred IDE to
create an empty ItsNat web application, this tutorial uses
Creating the ItsNat servlet
Create a servlet as explained in stateful hashbang tutorial.
According to this setup the URL accessing our servlet is (8080 is supposed):
Because our web site is SPI we would like a prettier URL like
In practice states are going to be defined in URL following this pattern:
We need to map
Yes this is a bit tedious, in this example we are going to add a fixed prefix
By using this prefix we only need to register one mapping:
This is the final web.xml:
Also add a simple
"overview" will be the default state.
Now replace the generated code of the
Take a look to the convention "overview-popup", in History API examples the character
Main page processing
Returning to the servlet:
This call registers with the name "main" the page template file
This template is very similar to the stateful hashbang example, but there are some important differences (beyond the title):
Now the base path is http://localhost:8080/spistfulhsapitut/site/, this is the reason of "../css/style.css" and ="../js/spi_hsapi.js".
Take a look to the code using History API like
Finally take a look to this dual link:
<td id="menuOpOverviewId"> Overview </td>
As you can see, the
Back to the servlet we also register a load listener for the
Again we are using a mini-framework in this tutorial:
We are not going to explain the classes of the packages
Main page processing and History API
Time to know how to manage the History API.
Obtaining the specified state present in the end of the URL on load time is really easy, no need of _escaped_fragment_ stuff like in hashbangs.
Code is similar to
If History API is not supported (old browsers), conventional page navigation is used:
Infrastructure of fundamental states
Now is the time to deep inside a concrete example using our mini-framework. We must to define the fundamental states being used as examples in this SPI web site.
This is the source code of the concrete
Code is basically the same as
All other classes of package
Download, Online Demo and Links
See running online (try to clear cookies to check there is no need of keep client state in server)
Download source code in GitHub.