Menu
For clarification: I am not trying to differentiate between a refresh and a reload, hence this is not a duplicate of refresh vs reload. I am trying to find out if there is a way to detect when a user triggers a hard reload instead of a normal reload. I am asking because I want to execute some code prior to a hard reload only.
Using JavaScript, via the browsers' reload button, or by a shortcut like Shift+Ctrl+R it is possible to perform a hard reload of a browser tab. Is it possible to detect such a hard reload with JavaScript and if so how?
I know one can detect when a normal reload event is triggered with the onbeforeunload event and I can find out the navigation type to differentiate between a refresh and a reload but I am unable to detect a hard reload.
So far I'am using the following JS code to detect a reload:
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
// For older browsers
console.log('Is reloading?', event.currentTarget.performance.navigation.type === 1);
// For modern browsers
const perfEntries = performance.getEntriesByType("navigation");
for (let i = 0; i < perfEntries.length; i++) {
console.log('Is reloading? ', perfEntries[i].type === 1);
}
});
I would like to be able to distinguish between a normal reload, e.g., location.reload(), and a forced reload, e.g., location.reload(true).
895
A better way to know that the page is actually reloaded is to use the navigator object that is supported by most modern browsers. It uses the Navigation Timing API. thanks buddy this is accurate solution to detect either the page is reloaded from right click/refresh from the browser or reloaded by the url.
How do I force my browser to refresh cache? Press Ctrl+F5. In most browsers, pressing Ctrl+F5 will force the browser to retrieve the webpage from the server instead of loading it from the cache. Firefox, Chrome, Opera, and Internet Explorer all send a “Cache-Control: no-cache” command to the server.
Or, Hold down Ctrl and press F5. Just open the Chrome Dev Tools by pressing F12. Once the chrome dev tools are open, just right click on the refresh button and a menu will drop down. This menu gives you the option of doing a hard refresh, or even clearing the cache and do a hard refresh automatically.
You cannot detect hard refresh in javascript, as there is no access to the headers for the currently loaded page.
The problem with JavaScript is that it has no notion of a 304. It begins executing in the context of a webpage, but it doesn't know how either itself or the page got there.
However, the server can tell from the request headers if this is a hard refresh, so there's the option of cooperating. For example the server can include a custom <meta> tag in the response or add a special class to <body> and your script will then have access to this information.
Another option is to intercept key combination based on Browser/OS and act before a hard refresh is triggered (appending something to the url, setting a cookie or a local/sessionstorage property)
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
