Synchronize the browser ‘Go back’ button and ‘Go back’ button on the page.

Currently, SPA is very popular. If we think about it is better for the user experience. Instead of updating the page every time and getting slightly different data over and over again. We make a small request and update a tiny piece of the UI.

But sometimes some SPA has too many different parts of the UI on a single page. It could give the user the wrong idea that he changed the URL. It is not a big deal until the user presses on the “go back” or “go forward” buttons. After that, the user does not understand what happened. Probably, a lot of developers solve this issue by adding their own “go back” button on the page. It works pretty well. I think the best solution is to synchronize the “go back” button in the browser and the “go back” button on the page. In this way it does not matter which button the user chooses to click. The user will get the same result.

How can we synchronize SPA and browser history? We have access to object window.history. We can not get the URL but we use methods: back, forward and pushState.

The most interesting for us is a method push state. By using this method we can add a new URL into browser history.

The main idea of SPA is that we use the same page. What are we gonna write into browser history? We will use the query parameters to write the state of SPA. Imagine on our page we have 3 tabs. Every time when a user changes tabs we will add a new URL with different query parameters.

Enough theory, let’s make an example. We will make a tiny page with two buttons “go back”, “add new URL” and one input field to set a query parameter.

We fill an input for the query parameter. By pressing on the “Add URL” button, we create a new URL and save it in browser history. One important thing, in the constructor we subscribe to route changes. This subscription will notify us when we press a “go back” button.

If you need to take a close look at the project here is the link.

Originally published at http://tomorrowmeannever.wordpress.com on November 10, 2021.