History API – Dive Into HTML5(!)

Hello folks, i was rather busy in the past weeks finalizing some of my projects i started in ’14. Today i want to introduce you a brilliant, but pretty unknown technic on websites, which are making your site load way faster by using the benefits from Ajax while still beeing crawlable and keep their seo-friendlyness. In the last weeks i extended the project with a new pretty unknown feature. It makes use of the pushState(); and popState(); features of the HTML5-History-Api.

The technics

Loading parts of the website by using ajax isnt new. But there are plenty cons: search-engine-crawlers cant understand the content, you cannot use the back(); function of your browser, you ‚ll lose youre states, etc. There might be way more cons. Anyway, by using pushState(); function you can change the displayed url in the browser bar. Wanna try it out? Click me and watch your adress-bar. . Thats pretty awesome, isnt it?

Well, using pushState(); will only change the content of the adress bar. If you press the back button of your mouse/browser/smartphone you are going to end up wherever you was before. Thats were popState() is coming into the game. As soon as you use the back function of your browser, popState(); is fired. Now you can add urls to the browser history in an onclick event and also are able to react on the back function triggered by mouse, browserclick, swipe or phonebutton. Now you just need to combine those functions with simple ajax xmlhttp calls and load your content depending on its state. As mentioned above i did this with our project which you can now use by ajax fully. It’s incredibly fast(!). For example, if you open the top left navigation and click one of those links you should notice, that the navigation stays opened while the page is beeing loaded. If the entire page would be loaded, the navigation would get closed automatically. We now could play movies in a draggable container while surfing over the website without losing it.

Code example


//JavaScript
history.pushState('', 'new title' '/your/new/url');

I had to rewrite a lot of the code, because the first version of the pageLoader was designed in a different way. I created a new php class (called it siteLoader) to load the entire site. Now its able to load the entire site initial, or only parts of it, when using Ajax. That works pretty awesome. As we re using normal „<a href““ ></a>“ the side is still useable without JavasSript.
All links are crawlable by searchengine crawlers and we have a fully useable back function from your browser while adding all states to your browsers history.

Compatibility:

This feature is supported by all major browsers and for ie beggining at version 10.

Final thoughts:

The benefits are clearly. Ajax calls only have to load some kbs or even bytes instead of loading the entire page over and over again.
If you have questions or also want a perfect fast website, contact me. Hope that helped.

Comments are Disabled