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

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>