Disable css and image caching in the browser

Question

Recently, I developed a project that had some drastic changes in its design, mainly by the side of css and images. In this, accessing it on some machines, I verified that to visualize its new design it was necessary to clear the cache (Ctrl + F5). However, on the user side, we who are IT know what to do but the user does not. This way I would like to know if there is any way to disable automatic saving of CSS and cached images.

Answer 1

In ASP.NET MVC, this is done through a global filter using the OutputCacheAttribute. The following code can be placed on Global.asax.cs:

public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
    filters.Add(new OutputCacheAttribute { VaryByParam = "*", Duration = 0, NoStore = true });
    ...
}

NoStore indicates to the browser by header, using the property Cache-Control: no-store that nothing should be cached (JS and CSS).

You can decorate your Controllers individually, if you do not wish to disable the cache in the entire system:

[OutputCache(VaryByParam = "*", Duration = 0, NoStore = true)]
public class MeuController : Controller { ... }

Or Actions:

[OutputCache(VaryByParam = "*", Duration = 0, NoStore = true)]
public ActionResult Index() { ... }

Answer 2

Zack, unfortunately I’m not aware of any metatag that forces the cache clean.

but you can use a hack to force the file update. The simplest would be to add extra information to the link to the file .js or .css, either changing the name or adding a queryString.

Let’s say you have the following file .css: \Content\style.css, you can assume that from now on this is version 1 of the file, so you can link it to the page using one of the following alternatives:

<link src="\Content\style-1.0.0.css" /> <!-- é necessario renomear o arquivo -->
<link src="\Content\style.css?v=1.0.0" /> <!-- não é necessario renomear o arquivo -->

In the example above I am passing a version, which you can change manually, however you can use other information, as the md5 of the archive or the epoch team of the last modification.

Both the epoch as to the md5 can be obtained in Runtime using some helper in your preferred language, in which case your link would look like this:

<link src="\Content\style.css?t=1468933059" />
<link src="\Content\style.css?h=2e9d6b2fddb91d78a0f3f07194c98e9e" />

remembering that if you have any doubts about how to automate the generation of this data, you should open a new question with a more defined scope and inform which technologies/tools you can use (C#, Node, PHP, Gulp, Grunt, etc.).

EDIT

If you really want to disable Cache, you should use the solution suggested by @Ciganomorrisonmendez (which in my opinion is the one that best answers your problem).

But remember that both the client (browser) and server cache can greatly improve the user experience and ease the load to the server, so by keeping the cache active and using the above technique, you will be able to take advantage of the benefits of caching and ensure that users will always see the latest version of their files.