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.
<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.
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
@jQuery.PHP.Magento.com beat me to it, but you can use localStorage without needing to track particular URLs:
<script>
window.onbeforeunload = function()
{
localStorage.setItem("beenHere", true);
}
if (localStorage.getItem("beenHere"))
{
alert("Please refresh");
localStorage.removeItem("beenHere");
}
</script>
"beenHere" would need to be a different string for different pages, but can be symbolic, not a precise URL.
EDIT: Wait, noticed a problem: this will alert when you refresh. Will have to think about it more.
Use following:
On 2nd page only use :
localStorage.setItem("urlnow", document.URL);
On 1st page check
if(localStorage.getItem("urlnow") == Your_URL_OF_Next_Page)){
window.location.reload()
}
There is no such method to check Next page url.Just you can have document.referrer which is not useful in your case, so you need to hardcode Next page url to check if the localstorage variable was set. Means the user went on that page. You can destroy localstorage too as per your requirement.
Edit : Better way
On 2nd page use :
$(document).ready(function(){
localStorage.setItem("nextPageHit",1));
})
On 1st page
$(document).ready(function(){
if(localStorage.getItem("nextPageHit")){
window.location.reload();//Forcible reload.
localStorage.setItem("nextPageHit",0);
}
})
It might be better to not cache the pages so the user doesn't need a refresh. Adding the following tag in your disables caching of the page.
<meta http-equiv="Cache-Control" content="no-store" />
You need to say the browser not to save the cache of this page by setting the response headers.
Using Ruby on Rails:
response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' # HTTP 1.1.
response.headers['Pragma'] = 'no-cache' # HTTP 1.0.
response.headers['Expires'] = '0' # Proxies.
