¿Cómo vaciar la caché del navegador mediante programación?

Estoy buscando una forma de vaciar programáticamente la caché del navegador. Hago esto porque la aplicación almacena en caché datos confidenciales y me gustaría eliminarlos cuando presione "cerrar sesión". Esto sucedería a través del servidor o JavaScript. Por supuesto, todavía se desaconseja el uso del software en una computadora pública o extranjera, ya que existen más peligros, como los registradores de claves, que no se pueden vencer a nivel del software.

Es posible, simplemente puede usar jQuery para sustituir la 'metaetiqueta' que hace referencia al estado de la caché con un controlador / botón de eventos, y luego actualizar, fácil,

$('.button').click(function() {
    $.ajax({
        url: "",
        context: document.body,
        success: function(s,x){

            $('html[manifest=saveappoffline.appcache]').attr('content', '');
                $(this).html(s);
        }
    }); 
});

NOTA: Esta solución se basa en la caché de la aplicación que se implementa como parte de la especificación HTML 5. También requiere la configuración del servidor para configurar el manifiesto de App Cache. No describe un método mediante el cual uno pueda borrar la caché del navegador 'tradicional' a través del código del lado del cliente o del servidor, lo cual es casi imposible de hacer.

No hay forma de que un navegador te permita borrar su caché. Sería un gran problema de seguridad si eso fuera posible. Esto se podría abusar muy fácilmente: en el momento en que un navegador admita tal "función" será el momento en que lo desinstale de mi computadora.

Lo que puede hacer es decirle que no almacene su página en caché, enviando los encabezados apropiados o usando estas metaetiquetas:

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

Es posible que también desee considerar desactivar la función de autocompletar en los campos de formulario, aunque me temo que hay una forma estándar de hacerlo ( consulte esta pregunta ).

Independientemente, me gustaría señalar que si está trabajando con datos confidenciales, debería usar SSL. Si no está utilizando SSL, cualquier persona con acceso a la red puede rastrear el tráfico de la red y ver fácilmente lo que ve su usuario.

El uso de SSL también hace que algunos navegadores no utilicen el almacenamiento en caché a menos que se indique explícitamente que lo hagan. Vea esta pregunta .

use html mismo. Hay un truco que se puede usar. El truco es agregar un parámetro / cadena al nombre del archivo en la etiqueta del script y cambiarlo cuando cambie el archivo.

<script src="myfile.js?version=1.0.0"></script>

El navegador interpreta la cadena completa como la ruta del archivo aunque lo que viene después del "?" son parámetros. Entonces, lo que sucede ahora es que la próxima vez que actualice su archivo, simplemente cambie el número en la etiqueta de secuencia de comandos en su sitio web (ejemplo <script src="myfile.js?version=1.0.1"></script>) y el navegador de cada usuario verá que el archivo ha cambiado y tomará una nueva copia.

La mejor idea es hacer la generación de archivos js con nombre + algún hash con la versión, si necesita borrar el caché, simplemente genere nuevos archivos con un nuevo hash, esto activará el navegador para cargar nuevos archivos

Inicialmente probé varios enfoques programáticos en mi html, JS para borrar la caché del navegador. Nada funciona en la última versión de Chrome.

Finalmente, terminé con .htaccess:

<IfModule mod_headers.c>
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
</IfModule>

Probado en Chrome, Firefox, Opera

Referencia: https://wp-mix.com/disable-caching-htaccess/

location.reload (verdadero); volverá a cargar la página actual, ignorando el caché.
Cache.delete () también se puede utilizar para nuevos Chrome, Firefox y Opera.

En Chrome, debería poder hacer esto utilizando la extensión de evaluación comparativa. Necesitas iniciar tu Chrome con los siguientes interruptores:

./chrome --enable-benchmarking --enable-net-benchmarking 

En la consola de Chrome ahora puede hacer lo siguiente:

chrome.benchmarking.clearCache();
chrome.benchmarking.clearHostResolverCache();
chrome.benchmarking.clearPredictorCache();
chrome.benchmarking.closeConnections();

Como puede ver en los comandos anteriores, no solo borra la caché del navegador, sino que también borra la caché de DNS y cierra las conexiones de red. Son excelentes cuando se realiza una evaluación comparativa del tiempo de carga de la página. Obviamente, no tiene que usarlos todos si no los necesita (por ejemplo, clearCache () debería ser suficiente si necesita borrar solo el caché y no le importa el caché DNS y las conexiones).

Ahora puede usar Cache.delete ()

Ejemplo:

let id = "your-cache-id";
// you can find the id by going to 
// application>storage>cache storage 
// (minus the page url at the end)
// in your chrome developer console 

caches.open(id)
.then(cache => cache.keys()
  .then(keys => {
    for (let key of keys) {
      cache.delete(key)
    }
  }));

Funciona en Chrome 40+, Firefox 39+, Opera 27+ y Edge.

Imagina que los .jsarchivos se colocan en/my-site/some/path/ui/js/myfile.js

Entonces, normalmente, la etiqueta de secuencia de comandos se vería así:

<script src="/my-site/some/path/ui/js/myfile.js"></script>

Ahora cámbielo a:

<script src="/my-site/some/path/ui-1111111111/js/myfile.js"></script>

Ahora, por supuesto, eso no funcionará. Para que funcione, debe agregar una o algunas líneas a su .htaccess La línea importante es: (.htaccess completo en la parte inferior)

RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]

Entonces, lo que hace es eliminar el 1111111111de la ruta y se vincula a la ruta correcta.

Así que ahora, si realiza cambios, solo tiene que cambiar el número 1111111111por el número que desee. Y, sin embargo, incluye sus archivos, puede establecer ese número a través de una marca de tiempo cuando el archivo js se modificó por última vez. Por lo tanto, el caché funcionará normalmente si el número no cambia. Si cambia, servirá el nuevo archivo (SI SIEMPRE) porque el navegador obtiene una URL completamente nueva y simplemente cree que el archivo es tan nuevo que debe ir a buscarlo.

Puede usar esto para CSS, faviconsy lo que sea que se almacene en caché. Para CSS solo usa así

<link href="http://my-domain.com/my-site/some/path/ui-1492513798/css/page.css" type="text/css" rel="stylesheet">

¡Y funcionará! Simple de actualizar, simple de mantener.

El .htaccess completo prometido

Si aún no tiene .htaccess, este es el mínimo que necesita tener allí:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    RewriteRule ^my-site\/(.*)\/ui\-([0-9]+)\/(.*) my-site/$1/ui/$3 [L]
</IfModule>