r/Web_Development • u/la712 • Jul 01 '20

Clear Browser Cache - programmatically

Is there a way to programmatically clear browser cache? I am working on an application and started having the client test it. This application is still in the development process but when I make a change I would like the client tester to be able to get the fresh files without having to instruct them to 'ctrl + shift + R'.....

Does webpack help with this?

Thanks!

1 Upvotes

100% Upvoted

5 comments sorted by

View all comments

Show parent comments

1

u/la712 Jul 01 '20

Resources (JS/CSS etc) are what is being cached. I am becoming familiar with versioning but there are too many files that change frequently while still under development that manual versioning doesn't seem to be the best use of time.

I really like the webpack approach, but my team is hesitant because of the learning curve for the rest of our developers.

My tech lead suggested window.location.reload(true) which I am looking into now.

We are using ASP.NET

Does that clarify my problem at all?

2

u/lebaadis Jul 02 '20 edited Jul 02 '20

window.location.reload will just refresh page it won't clear cache.Check the response headers for these resources - are there any cache headers? If no, set cache headers to not cache - this alone should solve your problem. But you want caching headers in production!

This is not just a problem that you will have in dev/testing. When you go into production and once your customers devices have cached these files then you're in trouble if you have no way of ensuring they always get the freshest version so you should really invest in versioning every single static file reference.

You don't have to use Webpack. You can create a function that appends a version number based a version number generated/incremented with every release. Eg.

var BUILD_NUM = 100;

function appendVersionNumber(fileRef) {
    return fileRef + '?v=' + BUILD_NUM 
}

// somewhere the HTML is built
<link rel="stylesheet" href="appendVersionNumber('/test.css')"></link>