Force client-side update after site update

Question

The scenario of my problem is this, I have a website that has been updated, but some customers are reporting that the update was not made for them, which are still in the old model of the site (probably by the persistence of cache).

I’ve done several updates and never had that problem. I don’t know if it was the size of the update (basically a re-work of the whole project) that is implicating this problem, but I can’t get users to access the new version of the site.

I know to clean up the cache, Ctrl+F5, Ctrl+r may help, but not feasible...

I already make use of the version practice in the files, for example:

scr="meuscript.js?v=0123456"

href="meuestilo.css?v=0123456"

I also use some tags in HTML, such as:

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

But nothing has produced the desired effect. I confess that it is an area that I do not possess much experience and knowledge. So, what could I do to get the desired result? That is, force the page update (or cache) on the client side?

Answer 1

Something I saw in that soeng’s response

Taking the part that really matters:

When these values are provided through the response headers of the requests, they take precedence over the tags <meta>. some servers send default values, so it is advisable to send along to answer the headers explicitly.

You can check what is coming using Devtools by going to the tab Network > clicking on your page request > check the header Cache-Control in the section Response Headers flap Headers side panel.

Using PHP:

header("Cache-Control: no-cache, no-store, must-revalidate"); // HTTP 1.1.
header("Pragma: no-cache"); // HTTP 1.0.
header("Expires: 0"); // Proxies.

Using Java Servlet, or Node.js:

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setHeader("Expires", "0"); // Proxies.

Using ASP.NET-MVC

Response.Cache.SetCacheability(HttpCacheability.NoCache);  // HTTP 1.1.
Response.Cache.AppendCacheExtension("no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.0.
Response.AppendHeader("Expires", "0"); // Proxies.

Using ASP.NET:

Response.AppendHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.0.
Response.AppendHeader("Expires", "0"); // Proxies.

Using ASP:

Response.addHeader "Cache-Control", "no-cache, no-store, must-revalidate" ' HTTP 1.1.
Response.addHeader "Pragma", "no-cache" ' HTTP 1.0.
Response.addHeader "Expires", "0" ' Proxies.

Answer 2

Friend, a very simple solution is to rename the HTML/CSS/JS files that have been modified (and of course, change where they are also called), so the browser does not recognize anything in cache and loads the files fresh.

Answer 3

One method to force the browser to clear the cache is the HTML5 cache app. You create a Manifest file where you write what should be cached and what should not be cached.

ALWAYS that the manifest file is updated, the resources will be UPDATED. (don’t forget to clear as much meta tag as you used on cache) an example of manifest:

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css #em cache
/logo.gif # em cache
/main.js # em cache

NETWORK:
login.asp #nunca será mantido em cache

FALLBACK:
/html/ /offline.html

Take a look if it helps you:

http://www.escolaw3.com/html/html5-cache-app