Lovely, Smooth Page Transitions With the History Web API_part 1

In this tutorial we’re going to build a website with beautifully smooth transitioning pages, without the usual aggressive page refresh. Navigate through the pages in the demo to see what I mean.

To achieve this effect we’ll use the History Web API. In a nutshell, this API is used to alter the browser history. It allows us to load a new URL, change the page title, then at the same time record it as a new visit in the browser without having to actually load the page.

This sounds confusing, but it opens up a number of possibilities–such as being able to serve smoother page transitions and give a sense of speediness which improves the user experience. You have probably already witnessed the Web History API in action on a number of websites and web applications, such as Trello, Quartz, and Privacy.

The rather abstract (and rather nice) Quartz website

Before we go any further, let’s first look into one particular API that we are going deploy on the website.

The History Web API, in Brief

To access the Web History API, we first write window.history then follow this with one of the APIs; a method or a property. In this tutorial we’ll be focusing on the pushState() method, so:

1. window.history.pushState( state, title, url );

As you can see from the above snippet, the pushState() method takes three parameters.

1. The first parameter, state, should be an object containing arbitrary data. This data will then be accessible through window.history.state. In a real world application, we would pass data like a page ID, a URL, or serialized inputs derived from a form. 
2. The last two parameters are title and
3. url. These two change the URL and the document title in the browser, as well as record them as a new entry in the browser history. 

Let’s dissect the following example to better understand how the pushState() Method works.

1. (function( $ ){
2.  
3.     $( "a" ).on( "click", function( event ) {
4.  
5.         event.preventDefault();
6.  
7.         window.history.pushState( { ID: 9 }, "About - Acme", "about/" );
8.     } );
9.  
10. })( jQuery );

In the above code, a link attached with the click event then deploys the pushState() method. As we click on the link, we expect the code to change the document title and the URL:

From top to bottom: Chrome, Firefox, Opera.

And it does; the screenshot shows the URL is changed to “about/” as defined in the pushState() method. And since the pushState() method creates a new record in the browser history, we are able to go back to the previous page through the browser’s Back button.

However, all the browsers in this example are currently ignoring the title parameter. You can see from the screenshot the document does not change to About - Acme as specified. Furthermore, calling the pushState() method won’t also trigger the popstate event; an event which is dispatched every time the history changes–something we need! There are a few discrepancies on how browsers handle this event, as stated in MDN:

“Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn’t.”

We will need a library as a fallback to make the History Web APIs work consistently across the browser without any hurdles.

Meet History.js
Since the pushState() method does not work to its full potential, in this tutorial we are going to leverage History.js. As the name implies, this JavaScript library is a polyfill, replicating the native History APIs that work across different browsers. It also exposes a set of methods similar to the native APIs, albeit with few differences.

As mentioned earlier, the browser native API is called through the history window object with the lowercase “h”, while the History.js API is accessed through History with the uppercase “H”. Given the previous example and assuming we have the history.js file loaded, we can revise the code, as follows (again, notice the uppercase “H”).

1. window.History.pushState( {}, title, url );

I hope this brief explanation is easy to understand. Otherwise, here are some further references if you want to learn more about the Web History API.

• History API
• Manipulating the Browser History
• An Introduction to the HTML5 History

Building Our Static Website

In this section we won’t discuss each step needed to build a static website in detail. Our website is plain simple, as shown in the following screenshot:

The Website Homepage

You don’t have to create a website that looks exactly the same; you are free to add any content and create as many pages as you need. However, there are some particular points you need to consider regarding the HTML structure and the use of id and class attributes for some elements.

1. Load jQuery and History.js within the document head. You may load it as a project dependency through Bower, or through a CDN like CDNJS or JSDelivr.
2. Wrap the header, the content, and footer in a div with the ID wrap; <div id="wrap"></div>
3. There are a few navigation items on the website header and the footer. Each menu should be pointing to a page. Make sure the pages exist and have content.
4. Each menu link is given page-link class which we will use for selecting these menus.
5. Lastly, we give each link a title attribute which we’ll pass to pushState() to determine the document title.

Taking all this into account, our HTML markup will roughly look as follows:

1. <head>
2.     <script src="jquery.js"></script>
3.     <script src="history.js"></script>
4. </head>
5. <body>
6.     <div id="wrap">
7.         <header>
8.             <nav>
9.                 <ul>
10.                     <li><a class="page-link" href="./" title="Acme">Home</a></li>
11.                     <li><a class="page-link" href="./about.html" title="About Us">About</a></li>
12.                     <!-- more menu -->
13.                 </ul>
14.             </nav>
15.         </header>
16.         <div>
17.             <!-- content is here -->
18.         </div>
19.         <footer>
20.             <nav>
21.                 <ul>
22.                     <li><a href="tos.html" class="page-link" title="Terms of Service">Terms</a></li>
23.                     <!-- more menu -->
24.                 </ul>
25.             </nav>
26.             <!-- this is the footer -->
27.         </footer>
28.     </div>
29. </body>

When you are done building your static website we can move on the main section of this tutorial.
(continue)

If you found this post interesting, follow and support us.
Suggest for you:

Vue.JS Tutorials: Zero to Hero with VueJS JavaScript Framework

Learning ECMAScript 6: Moving to the New JavaScript

Closure Library: Build Complex JavaScript Applications

JavaScript Promises: Applications in ES6 and AngularJS

JavaScript For Absolute Beginners - Build Simple Projects