To reload cached CSS/JS files :
The easiest way for you is to use some kind of versioning, so that the browser automatically downloads the new, refreshed version of your JS. To reload cached CSS/JS files follow these methods.
You can achieve something very easily, just put a random number at the end of your JS file. For example you can take something from the cache like so:
[pastacode lang=”javascript” manual=”%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22app.js%3Fv%3D%7B%7B%20Cache%3A%3Aget(‘js_version_number’)%20%7D%7D%22%3E%0A” message=”jQuery Code” highlight=”” provider=”manual”/] [ad type=”banner”]This way the path to your app.js can change every time you push to the server.
You just need some piece of code to run every time you push. You could have a git hook set up that executes a php file, or you could have a custom Laravel Command that does that.
In your code that gets execute you basically need just something like this:
[pastacode lang=”javascript” manual=”Cache%3A%3ArememberForever(‘js_version_number’%2C%20time())%3B%0A” message=”jQuery Code” highlight=”” provider=”manual”/]This will change the version number, so thus the the old path that once was app.js?v=111 gets changed to app.js?v=112 and the browser sees that as a new file and re-downloads it
If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.
Sometimes it’s necessary to do a hard refresh to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out.
So how can you ensure that any updates you’ve made to your CSS will take place immediately for all users?
Here’s one way to do it:
[pastacode lang=”css” manual=”%3Clink%20rel%3D%22stylesheet%22%20href%3D%22style.css%3Fv%3D1.1%22%3E%0A” message=”Css Code” highlight=”” provider=”manual”/]The browser will view a file name of style.css as different from a file name of style.css?v=1.1, so it will generally force the browser to update the stylesheet. So, each time you update your CSS on the server, you can incrementally update your version number.
If you’re new to query strings, just know that the part before the equals sign is like a placeholder, and the part after the equals sign is the value put into that placeholder. This will have no effect on the CSS. It will only serve to make the browser think it’s a completely different file.
You could add many types of characters to the query string value, but numbers are a logical way to do it, because then you can just increase the number, and even add decimal places if you want.
And of course, if you don’t change the value for a while, the browser will continue to cache (or preserve) the file, and won’t attempt to download it unless other factors force it to, or you end up updating the query string value.
Automatic Javascript, CSS versioning to refresh browser cache :
When you update javascript or css files that are already cached in users’ browsers, most likely many users won’t get that for some time because of the caching at the browser or intermediate proxy(s). You need some way to force browser and proxy(s) to download latest files.
There’s no way to do that effectively across all browsers and proxies from the webserver by manipulating cache headers unless you change the file name or you change the URL of the files by introducing some unique query string so that browsers/proxies interpret them as new files. Most web developers use the query string approach and use a version suffix to send the new file to the browser. For example,
[pastacode lang=”javascript” manual=”%3Cscript%20src%3D%22someJs.js%3Fv%3D1001%22%20%3E%3C%2Fscript%3E%0A%3Clink%20href%3D%22someCss.css%3Fv%3D2001%22%3E%3C%2Flink%3E%0A” message=”jQuery Code” highlight=”” provider=”manual”/][ad type=”banner”]
Another approach is to run some build script that scans all files and updates the reference to the javascript and css files in each and every page in the website. But this approach does not work on dynamic pages where the javascript and css references are added at run-time, say using ScriptManager.
Example Program: