{"id":1290,"date":"2017-03-20T18:17:13","date_gmt":"2017-03-20T12:47:13","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=1290"},"modified":"2018-10-29T15:26:50","modified_gmt":"2018-10-29T09:56:50","slug":"javascript-force-browser-reload-cached-cssjs-files","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/javascript-force-browser-reload-cached-cssjs-files\/","title":{"rendered":"How to force browser to reload cached CSS\/JS files"},"content":{"rendered":"

To reload cached CSS\/JS files :<\/strong><\/span><\/h3>\n

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.\u00a0 <\/strong>To reload cached CSS\/JS files follow these methods.<\/p>\n

You can achieve something very easily, just put a random number at the end of your JS file<\/strong>. For example you can take something from the cache like so:<\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22app.js%3Fv%3D%7B%7B%20Cache%3A%3Aget(\u2018js_version_number\u2019)%20%7D%7D%22%3E%0A\u201d message=\u201djQuery Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n

This way the path to your app.js<\/strong> can change every time you push to the server.<\/p>\n

You just need some piece of code to run every time you push. You could have a git hook set up<\/strong> that executes a php file<\/a>, or you could have a custom Laravel Command<\/strong> that does that.<\/p>\n

In your code that gets execute you basically need just something like this:<\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201dCache%3A%3ArememberForever(\u2018js_version_number\u2019%2C%20time())%3B%0A\u201d message=\u201djQuery Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

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<\/strong> and the browser sees that as a new file and re-downloads it<\/p>\n

If you\u2019re a beginner and you\u2019re developing HTML<\/a> and CSS using an external stylesheet<\/a>, you might notice that in some browsers, under some circumstances, the changes you\u2019ve made to your CSS don\u2019t take effect immediately.<\/p>\n

Sometimes it\u2019s necessary to do a\u00a0hard refresh\u00a0to see the updates take effect. But it\u2019s 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.<\/p>\n

So how can you ensure that any updates you\u2019ve made to your CSS will take place immediately for all users?<\/p>\n

Here\u2019s one way to do it:<\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Clink%20rel%3D%22stylesheet%22%20href%3D%22style.css%3Fv%3D1.1%22%3E%0A\u201d message=\u201dCss Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

The browser will view a file name of\u00a0style.css<\/strong>\u00a0as different from a file name of\u00a0style.css?v=1.1<\/strong>, 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.<\/p>\n

If you\u2019re 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\u2019s a completely different file.<\/p>\n

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.
\nAnd of course, if you don\u2019t change the value for a while, the browser will continue to cache (or preserve) the file, and won\u2019t attempt to download it unless other factors force it to, or you end up updating the query string value.<\/p>\n

Automatic Javascript, CSS versioning to refresh browser cache :<\/strong><\/span><\/h3>\n

When you update<\/strong> javascript or css files that are already cached in users\u2019 browsers, most likely many users won\u2019t 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.<\/p>\n

There\u2019s no way to do that effectively across all browsers and proxies from the webserver<\/a> 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,<\/strong><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201d%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\u201d message=\u201djQuery Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n

[ad type=\u201dbanner\u201d]\n

Another approach is to run some build script that scans all files and updates the reference to the javascript and css files<\/strong> in each and every page in the website. But this approach does not work on dynamic pages where the javascript<\/a> and css references are added at run-time, say using\u00a0ScriptManager.<\/strong>
\nExample Program:<\/strong><\/span><\/p>\n[pastacode lang=\u201djavascript\u201d manual=\u201dResponse.Filter%20%3D%20new%20Dropthings.Web.Util.StaticContentFilter(%0A%20%20%20%20Response%2C%0A%20%20%20%20relativePath%20%3D%3E%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20if%20(Context.Cache%5BphysicalPath%5D%20%3D%3D%20null)%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20var%20physicalPath%20%3D%20Server.MapPath(relativePath)%3B%0A%20%20%20%20%20%20%20%20%20%20var%20version%20%3D%20%22%3Fv%3D%22%20%2B%0A%20%20%20%20%20%20%20%20%20%20%20%20new%20System.IO.FileInfo(physicalPath).LastWriteTime%0A%20%20%20%20%20%20%20%20%20%20%20%20.ToString(%22yyyyMMddhhmmss%22)%3B%0A%20%20%20%20%20%20%20%20%20%20Context.Cache.Add(physicalPath%2C%20version%2C%20null%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20DateTime.Now.AddMinutes(1)%2C%20TimeSpan.Zero%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20CacheItemPriority.Normal%2C%20null)%3B%0A%20%20%20%20%20%20%20%20%20%20Context.Cache%5BphysicalPath%5D%20%3D%20version%3B%0A%20%20%20%20%20%20%20%20%20%20return%20version%3B%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20else%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20return%20Context.Cache%5BphysicalPath%5D%20as%20string%3B%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%22http%3A%2F%2Fimages.mydomain.com%2F%22%2C%0A%20%20%20%20%22http%3A%2F%2Fscripts.mydomain.com%2F%22%2C%0A%20%20%20%20%22http%3A%2F%2Fstyles.mydomain.com%2F%22%2C%0A%20%20%20%20baseUrl%2C%20%20%20%20applicationPath%2C%20%20%20%20folderPath)%3B%7D%0A\u201d message=\u201djQuery Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n","protected":false},"excerpt":{"rendered":"

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.\u00a0 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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,275],"tags":[2515,2507,2500,2517,2509,2508,2502,2511,2501,2514,2512,2513,2505,2504,1125,2506,2503,2516,2510,2518],"class_list":["post-1290","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript","tag-auto-versioning-javascript-and-css-files","tag-automatic-javascript","tag-caching-how-can-i-force-clients-to-refresh-javascript-files","tag-caching-javascript-safely","tag-can-we-prevent-css-caching","tag-css-versioning-to-refresh-browser-cache","tag-etc","tag-force-browser-refresh-javascript","tag-force-browser-to-refresh-css","tag-force-browser-to-reload-css","tag-force-cache-refresh-html","tag-how-can-i-force-clients-to-refresh-javascript-files","tag-how-do-i-force-the-browser-to-use-the-newest-version","tag-how-to-force-browser-to-update-js-and-css-files-cache-after-deploy","tag-javascript","tag-javascript-force-client-side-browser-cssjs-cache-reload","tag-javascript-how-to-force-browser-to-reload-cached-cssjs-files","tag-javascript-file-versioning","tag-static-file-cache-busting","tag-versioning-css-and-js-files"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=1290"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/1290\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=1290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=1290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=1290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}