When releasing a new web app update, browser caching can be a problem.
For example, if you update the script.js
and if the user's browser still loads that script from the cache, the app can crash.
When I searched this on Google, I found several ways to prevent this like:
- Using cache headers
- Using GET params with the script's URL
- And more...
I would like to know what is the best way according to your thoughts.
Thanks.
Top comments (4)
The method that I am using currently is to add a version or build number suffix to your script.js. ex: script-1.0.0.js. You can automate this using your favorite task runner whenever you create a new build - npm, grunt, etc.
So, do you edit the HTML file every time?
I mean, the
<script>
tag's src.Or...?
What tech stack are you using for your app? There are a number of methods available but they depend on your stack. Here are some examples:
NPM
You can use npm to build your js file, concatenate, minify, etc. If you have a package.json, you may have a version property in it. When you run your build script, you can make reference to that version property. Here is an excerpt from my package.json file.
Dynamic
If you are using a server-side language like PHP, .NET, Ruby, etc, you can output the script tag using the server-side language, but first read a version.txt file. Example:
Then use your server-side language to read that .txt file, to get the version. Then use server-side language to output the script tag for you.
Thank you!
I was using the second approach. It works quite well.