Disable css and image cache in browser

4

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

    
asked by anonymous 19.07.2016 / 13:47

2 answers

7

In ASP.NET MVC, this is done through a global filter using the OutputCacheAttribute ". The following code can be placed in 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 Cache-Control: no-store property that nothing should be cached (JS and CSS).

You can decorate your Controllers individually, if it is not your wish to disable cache on the entire system:

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

Or Actions :

[OutputCache(VaryByParam = "*", Duration = 0, NoStore = true)]
public ActionResult Index() { ... }
    
19.07.2016 / 15:00
6

Zack, unfortunately I am not aware of any metatag that forces cache cleanup.

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

Let's say you have the following file .css : \Content\style.css , you can assume that this is version 1 of the file now, 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'm passing a version, which you can change manually, but you can use other information, such as the md5 of the file or the epoch time of the last modification.

Both epoch and md5 can be obtained in runtime using some helper in your preferred language, in this case your link would look like this:

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

If you have any doubts about how to automate the generation of this data, you should open a new question with a more definite 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 and browser caches can greatly improve the user experience and ease the load on the server, so by keeping the cache active and using the above technique, you can take advantage of the benefits of caching and ensure users will always see the latest version of their files.

    
19.07.2016 / 15:00