8

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).

F Lekschas
  • 12,481
  • 10
  • 60
  • 72
  • Do you consider closing the browser and reopening it the same as a page refresh? – Reactgular Jan 04 '19 at 13:49
  • 1
    What are you trying to achieve? Ultimately you really can't tell what a browser is up to. – Pointy Jan 04 '19 at 13:52
  • If the server sets a hash code as a cookie when the page is fetched, then the JS checks this hash code against local storage. If they do not match, then it was loaded but if they match it was cached. This works even if you use HTTP header caching. – Reactgular Jan 04 '19 at 13:54
  • @cgTag this is the most viable solution for me too – Mosè Raguzzini Jan 04 '19 at 14:10
  • @BanujanBalendrakumar this is not a duplicate as the user are asking for a hard refresh vs refresh distinction – Mosè Raguzzini Jan 04 '19 at 14:11
  • 1
    @MosèRaguzzini yeah, this is a server problem masquerading as a client problem. It's been asked many times on this website, but people keep wanting to solve the problem in JavaScript. It's the same as server programmers wanting to know what timezone a visitor is in by looking at their IP address, when it's a client side problem. – Reactgular Jan 04 '19 at 14:23
  • @cgTag Nope, it's not a server problem. Maybe I wasn't clear but I am simply trying to find out if there's a way to detect a specific browser event (a _hard reload_) is triggered. Other events like URL changes, clicks, idling, unloads, etc are also detectable so maybe there's a clever way to detect a **hard** reload as well (e.g., service workers might work). – F Lekschas Jan 04 '19 at 16:50
  • There is no fool proof way to detect it – epascarello Jan 04 '19 at 17:05
  • I don't know what the use case was for the OP, but I ran into one that could use this: XHR fetches that are returning stale cached content. A hard refresh loads current content, but it doesn't load the same urls that are used with xhr, so they don't get purged from cache. It would be nice to be able to take a hard refresh done by the user as a signal to send aggressive anti-chache headers with any following XHRs. – Paul Kienitz Dec 19 '22 at 04:54

1 Answers1

3

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)

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
  • Well there *is* the `PerformanceNavigationTiming` API, in some browsers. – Pointy Jan 04 '19 at 14:00
  • Safari and Safari mobile does not support it at all and the only types contemplated are "navigate", "reload", "back_forward" or "prerender". – Mosè Raguzzini Jan 04 '19 at 14:08
  • Yes I agree, it's just a new facility that makes it possible for a page to know *something* about how it was loaded. I personally am not sure what a normal application would do with that information. – Pointy Jan 04 '19 at 14:10
  • "Safari and Safari mobile does not support it at all" but they support PerformanceNavigation. See https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation or test it yourself `console.log('Is reloading?', window.performance.navigation.type === 1);`. Hence, "it doesn't know how either itself or the page got there" is not entirely true. – F Lekschas Jan 04 '19 at 14:26
  • @FLekschas it is not able to say whether is a refresh or hard refresh or not. So you do not know HOW EXACTLY you get there. It's a fact. – Mosè Raguzzini Jan 04 '19 at 15:36