JavaScript Hard Refresh of Current Page

JavaScript hard refresh of current page

Try to use:

location.reload(true);

When this method receives a true value as argument, it will cause the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.

More info:

• The location object

javascript how to force hard refresh of current page

The solution was to specify
{ 'Cache-Control': 'no-cache, no-store, must-revalidate' }; in the request header as instructed in here

window.location.reload with clear cache

reload() is supposed to accept an argument which tells it to do a hard reload, ie, ignoring the cache:

location.reload(true);

I can't vouch for its reliability, you may want to investigate this further.

---

Edit (2021): the parameter was never standardised and has been deprecated and removed in more modern browsers. Adding a comment every quarter describing this fact will not help.

Why/When is it needed to hard refresh a webpage in a browser?

Short Answer

Browsers cache CSS, JS and other files to improve the loading time of web applications and their relevant pages. Depending on how the website is implemented when a new version of the JS, CSS is added and difference in a shape and form with the old version of the file. New part of the page are calling or interacting with an old version of the file that is cached in the browser. This results in the inconsistent behaviour.

Long Answer

In old days of web applications development, pages had smaller JavaScript and CSS files if there where cool enough to go beyond the basic HTML pages. Also pages stored in separate HTML files. And the browser would load a whole new page application as you clicked on a new link.

In modern web applications the shift was towards Single Page Applications. These are applications where you have a single page that is responsible for loading on the content. All modern websites (e.g. Facebook, Netflix, etc.) have been built using the new technique.

In Single Page Applications, the same page has large JS and CSS files attached to it. That means despite the massive improvement to our internet speed, it will be in inefficient for the browser to load the whole Single Page and all its JS, CSS, IMG files every time the user does a refresh. By caching these files that means the browser now only needs to load new data content on the page. This results in far better user experience.

The downside of this was when a new JS or CSS file was released and the browser was still using the old JS or CSS file. It would impact the business logic or the layout in unpredictable ways. That why browsers introduced a HARD PAGE REFRESH option to allow the load of a single page application be forced to load from the backend server rather than the cache.

If this topic interests you you can do further read on best practice on how to setup your single page application to ensure every time you release a new JS or CSS or even images it is guaranteed that the browsers reload the content and don't use the cached assets.

How do I refresh a page using JavaScript?

Use location.reload().

For example, to reload whenever an element with id="something" is clicked:

$('#something').click(function() {
    location.reload();
});

The reload() function takes an optional parameter that can be set to true to force a reload from the server rather than the cache. The parameter defaults to false, so by default the page may reload from the browser's cache.

How to force refresh of javascript

this worked

<script type="text/javascript" language="javascript">
    var versionUpdate = (new Date()).getTime();
    console.log("versionUpdate=", versionUpdate)
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "blah-foo-bar.js?v=" + versionUpdate;
    document.body.appendChild(script);
</script>

---

Related Topics