js/css caching bypass

Question

css

Hello! I want to ask a very simple question:

There is a self-written site, which is also constantly being finalized, hence the script and style files are being finalized.
Modern browsers are very good at caching downloaded files on their own, and when the file on the server changes, they stubbornly continue to use what is in the cache.
How can I force the browser to download a file from the server again each time? I would like to see the most cross-browser solution.

For now, we are saving ourselves by manually renaming files before each update, but I really don’t want to continue doing this ...
Perhaps there is some more automated way to prescribe the script version in both the file name and template headers?

Answer 1

The easiest option for you, in my opinion, is, of course, to use the GET parameter after the script:

<script src="/js/script.js?1273455236"></script>

But, not just a parameter, but in this parameter, pass the time the script file was modified in unixtime format. In such a situation, your file will be updated for all users after it is changed on the server. A similar trick can be done with a hash of a file, for example MD5, this will avoid cases where the modification time has shifted without changing the content, and, in fact, the cached version will suit everyone. It depends on your deployment method.
Of course, such checks involve the file subsystem, interpreter, etc., which is not very fast and I would not recommend such a scheme in production, but, for the realities of a rapidly changing project, it is a good shot at both birds with one stone.

Answer 2

main.js?123
main.css?123
If parameters (?123) are passed to a file, the browser must load it again.

Answer 3

Isn't it better to get out of your head all these anachronisms (al even insanity) described above, and use what was actually implemented for your task, that is, ETag. Read more on Wikipedia, or somewhere else (there is a lot of information).
+ that everything happens automatically and the file is cached.
Usage example for ".htaccess":
# Set ETag to last modified time and file size
FileETag MTime Size

Answer 4

for nginx something like this

location ~* /static/\d+/ {
   alias /path/to/static;
}

in the template, when changing scripts / styles, increase the number

<script src="/static/123/js/core.js"></script>

Answer 5

if you need to disable caching for some file at all, then in the template add the unixtime (time in seconds since the unix epoch) to the end of the file
style.css?1292227150
In Ruby, this is Time.now.to_i, there are similar functions in almost all languages.

Answer 6

There is a constant, for example, REVISION which is equal to the current revision number of the static.
All statics are included as /css/REVISION/main.css, /js/REVISION/core.css
In nginx it is written as above:

Answer 7

<script src="js/jquery.canvasjs.min.js?v=<?php echo filectime('js/jquery.canvasjs.min.js'); ?>"></script>

Answer 8

If you need to disable caching altogether, then in my opinion the most reliable way is to generate a random number as described above and add the Cache-Control: no-cache, no-store header to the server response.

Answer 9

You can also use the http header Last-Modified

Answer 10

Because there is no implementation technology in the question, then I’ll write how with this in django. For django, there are about a dozen libraries that do this: djangopackages.com/grids/g/asset-managers/
After the initial setup, everything works automatically: the file has changed => on the server, the static is rebuilt, recompressed, a new unixtime is attributed to the collected file and in html the path is updated.

Answer 11

https://anatoly.fenric.ru/development/pravil-noe-o...