I know, this question looks quite the same as those asked and reasked regularly, as for example here:
How to force reloading a page when using browser back button?
I need to know if the user has...
. navigated to current page, or reloaded current page (in both cases the page has been normally loaded, I need no further specific action)
. or has arrived on current page using history back or forward button (in these cases, the page is not loaded, just anyhow taken out of browser-cache, and I need to take further actions -the simplest being just reloading the page, window.location.reload(); or equivalent).
I tried the solutions exposed here: https://stackoverflow.com/a/43043658/3872061 and here: https://stackoverflow.com/a/56851042/3872061 as well as in several other places, within Stackoverflow or not.
It works well for Firefox (105.0.1), for Edge (105.0.1343.50), but I can't get it to work with Chrome (105.0.5195.127).
Here the simplest test I could imagine.
page1.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(window).on("pageshow", function(e){
$("#type").text(window.performance.getEntriesByType("navigation")[0].type);
let historyTraversal = event.persisted
|| ( typeof window.performance != "undefined" && window.performance.getEntriesByType("navigation")[0].type === "back_forward" );
if ( historyTraversal ) { // Handle page restore.
$("#backOrNot").text('User just came back using the history "back" button');
//window.location.reload(); // this is actually the targetted action: reload page
}
else {
$("#backOrNot").text('User loaded the page');
}
});
</script>
</head>
<body>
<p id="backOrNot"></p>
<p>( window.performance.getEntriesByType("navigation")[0].type = <span id="type"></span> )</p>
<p><a href="page2.html">Just a link from where you can click the history back button</a></p>
</body>
</html>
page2.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<p>
From here, try to:<br>
1. Navigate to <a href="page1.html">page1.html</a><br>
2. Go back to page1.html using the history back-button
</p>
</body>
</html>
With both FF and Edge, when you come back to page1 using the history, the "back_forward" information is available.
With Chrome, you just get the status ("navigate" or "reload") which the page had on the initial load,as if you had never navigated away then returned using the back button.
What have I missed? What am I doing wrong here?
