Search code examples
javascriptcachingbrowser-cachecache-control

javascript how to force hard refresh of current page


I have a button in a webapp that when clicked on should hard-reload the page and all its components.
I make changes to one of the javascript files (file1.js) but the changes are not updated.

According to: here and here using window.location.reload(true); should reload the page from the server.
In my program, clicking on the button triggers this line of code, but the changes still not show up.
The code is bundled via webpack.

When clicking on the button, the Network tab in Chrome debugger shows the network requests that are associated with reloading the page.
One of them is the main page.

  • It's Request Headers shows cache-control: no-cache
  • It's Response Headers shows Cache-Control

Further down in the list, I see app.bundle.js which includes the specific file file1.js.
The General section for app.bundle.js shows Status Code: 200 (from memory cache)

So clearly, not all elements of the page are reloaded from the server.
Below are the sections from the Chrome debugger Network tab.
How can I force loading all the pages not from cache?

Sections from Network tab in Chrome debugger

# Network request fields for getting https://staging.bldlog.com/index

General:
   Request URL: https://staging.bldlog.com/index
   Request Method: GET
   Status Code: 200 
   ...

Request Headers:
   :authority: staging.bldlog.com
   :method: GET
   :path: /index
...
   cache-control: no-cache


Response Headers:
   access-control-allow-headers: DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range


# --------------------------------------------------------------

# Network request fields for getting https://staging.bldlog.com/V1/build/mlj/app.bundle.js

General:
   Request URL: https://staging.bldlog.com/V1/build/mlj/app.bundle.js
   Request Method: GET
   Status Code: 200  (from memory cache)

Solution

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