How can I detect back navigation on the client in javascript?

Question

Please Note: I am not trying to detect that the back button was clicked. I don't care about that.

I just want to know that they page was loaded on a back navigation. I want to display a warning to my user in one place of my application if they click the back button advising them to refresh.

Edits:

1) I do want my pages to cache. We live in a mobile world now. Not caching is a bad practice.

2) I would like this feature to be URL agnostic. Decoupling is good practice.

Answer 1

<script>
if (history.state !== null  &&  +history.state < history.length)
{
    alert("refresh needed");
    history.replaceState(null, "", window.location.href);
}
else
{
    history.replaceState(history.length, "", window.location.href);
}
</script>

The first time the page loads, this stores the current length of the history (which is also the page's position in the history) into the history itself, without changing the browser's location or otherwise modifying the history. On a revisit, it checks whether that position is at the end of the history - if not, there's been some back-navigation. It then alerts and clears the stored position.

Pros:

• Does not trigger alert on refresh.

• Does not trigger alert if page is visited again later, either in the same tab or a different one.

Cons:

• Cannot distinguish between forward-navigation and back-navigation. I.e., if the user goes back further than this page and then navigates forward to it, it will still alert, because some back-navigation was used to get here. However, I would think that even in this situation, you would want the user to refresh.

• Only alerts once. If the user then goes forward and back again, it won't alert again. Since the user has already been notified, perhaps this is not important.

Answer 2

Here is a simple method. It will detect the page was loaded from both back and forward navigation though.

if(window.performance.navigation.type === 2) {
   // the page was navigated to via the forward or back button
   // refresh
}

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation