Force Google Chrome to check for new JavaScript files every time I access a web site
Option 1: Disable cache temporarily
- Open Developer Tools (Press F12 or Menu, More Tools, Developer Tools)
- Open Developer Tools Settings (Press F1 or DevTools Menu, Settings)
- Check "Disable cache (while DevTools is open)" under the Network header of the Preferences pane
Option 2: Disable cache for session
Start Chrome with the command-line switches --disk-cache-size=1 --media-cache-size=1
which will limit the caches to 1 byte, effectively disabling the cache.
Option 3: Manual Force Refresh
Reload the current page, ignoring cached content: Shift+F5 or Ctrl+Shift+r
Chrome Keyboard Shortcuts - Chrome Help (Under "Webpage shortcuts")
Option 4: Extra Reload Options (Source)
With Developer Tools open, right-click the Reload button to display a reload menu with the following:
- Normal Reload (Ctrl+R)
- Hard Reload (Ctrl+Shift+R)
- Empty Cache and Hard Reload
It may not be 100% related to the chrome refresh but for further developpment. Like @Dom said, you can add a ?v=# after your ressource. One way to automate the process is to hash the content of the said file and use that as the version.
I have a snippet code on how to to this in C# (Razor for implementation) if this can help.
Helper:
public static string HashUrl(string relativeUrl)
{
var server = HttpContext.Current.Server;
if (File.Exists(server.MapPath(relativeUrl)))
{
byte[] hashData;
using (var md5 = MD5.Create())
using (var stream = File.OpenRead(server.MapPath(relativeUrl)))
hashData = md5.ComputeHash(stream);
return relativeUrl.Replace("~", "") + "?v=" + BitConverter.ToString(hashData).Replace("-", "");
}
return relativeUrl + "?v=notFound";
}
Implementation:
<link rel="stylesheet" [email protected]("~/Controllers/Home/Views/Index.css") />
Hope this helps
EDIT --- Some have asked for some build runtime and for 1000 small resources, it takes approximately 11 ms.
https://en.code-bude.net/2013/08/07/md5-hashes-in-c-benchmark-and-speed-%E2%80%8B%E2%80%8Boptimization/
https://en.code-bude.net/wp-content/uploads/2013/08/md5_performance_benchmark_2.png
In other cases where these may not be possible, for example wanting to force a refresh on an end-user's computer that you don't have access to, you can append a version number to the script name as a query parameter making the browser identify it as a different file. ie. example.js?v=1
. Bear in mind you'd need to change the number on each reload to force it.
You could also do this with local development, but the dev tools method is much more efficient.