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

Improve this question
9
  • Do you consider closing the browser and reopening it the same as a page refresh? Commented Jan 4, 2019 at 13:49
  • 1
    What are you trying to achieve? Ultimately you really can't tell what a browser is up to. Commented Jan 4, 2019 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. Commented Jan 4, 2019 at 13:54
  • @cgTag this is the most viable solution for me too Commented Jan 4, 2019 at 14:10
  • 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. Commented Jan 4, 2019 at 14:23

2 Answers 2

Reset to default
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)

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Well there is the PerformanceNavigationTiming API, in some browsers.
Safari and Safari mobile does not support it at all and the only types contemplated are "navigate", "reload", "back_forward" or "prerender".
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.
"Safari and Safari mobile does not support it at all" but they support PerformanceNavigation. See 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.
@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.
0

If you're using service workers, one heuristic would be to use navigator.serviceWorker.controller:

navigator.serviceWorker.controller returns null if the request is a force refresh (shift+refresh).

https://www.w3.org/TR/service-workers/#dom-serviceworkercontainer-controller

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.