How to force a browser client to fetch a updated uncached JS file

[MrMoboBlaster]

Hello All, would someone be able to assist me, I am a beginner in web development and I have a website that I made changes to in a Javascript file but the browser keep showing a cached version of that file unless I make a new file with a new name. Is there any way that I could implement some code to force the browser to fetch the updated javascript file? Any help would be much appreciated... Thanks a lot.

 

[kolaval]

If I make changes I rename the js link in html:
file.js to file.js?1 to file.js?2 etc.

 

[_kabal_]

A really simple way to achieve this, assuming you aren’t using a build process, is to just include a query param when loading the script

<script src="my_file.js?version=1.0.1"
// make changes to your js, so update the version in your html

<script src="my_file.js?version=1.0.2"

Bundling tools like webpack/roll up automate this by generating filenames which are the hash of the file’s content (when the content changes, the hash changes)

<script src="8743b52063cd84097a65d1633f5c74f5.js"

 

[MrMoboBlaster]

So just to clarify, Do I have to change the actual file on the server's name with the added '?version=1.0.1' param or just the path to file in the script link? like this -> <script src="my_file.js?version=1.0.2" I saw this technique when searching about this issue but was unsure if that would could issue as the actual file name does not contain the added '?version=1.0.1' name... Thanks for everyone's help. I do appreciate it a lot.

 

[Foxhound5366]

So just to clarify, Do I have to change the actual file on the server's name with the added '?version=1.0.1' param or just the path to file in the script link? like this -> <script src="my_file.js?version=1.0.2" I saw this technique when searching about this issue but was unsure if that would could issue as the actual file name does not contain the added '?version=1.0.1' name... Thanks for everyone's help. I do appreciate it a lot.

Just the path to the file needs to change, that’s all. You don’t have to rename the file. Works a treat.

 

[MrMoboBlaster]

Thanks Dudes, I did that and it worked like a charm. Thank you guys so much.

 

[kolaval]

A really simple way to achieve this, assuming you aren’t using a build process, is to just include a query param when loading the script

<script src="my_file.js?version=1.0.1"
// make changes to your js, so update the version in your html

<script src="my_file.js?version=1.0.2"

Bundling tools like webpack/roll up automate this by generating filenames which are the hash of the file’s content (when the content changes, the hash changes)

<script src="8743b52063cd84097a65d1633f5c74f5.js"

Jy's fluks huh?

 

[_kabal_]

Jy's fluks huh?

I’d say I’m pretty cool yeah