Navegador, borrar la caché

https://stackoverflow.com/questions/1922910

20-09-2019
|

Pregunta

Hay una manera que puedo poner algo de código en mi página de modo que cuando alguien visita un sitio, borra la caché del navegador, para que puedan ver los cambios?

Idiomas utilizados:ASP.NET, VB.NET y por supuesto, HTML, CSS y jQuery.

Solución

Si se trata de cambios .css y .js, una forma es a "almacenamiento en caché" es añadiendo algo así como "_versionNo" al nombre del archivo para cada versión. Por ejemplo:

script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.

O, alternativamente, hacerlo después de que el nombre de archivo:

script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.

Se puede extraer de este enlace para ver cómo podría funcionar .

Otros consejos

Mira en el href="http://www.i18nguy.com/markup/metatags.html" rel="noreferrer"> expira etiqueta META.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

Otra de las prácticas comunes es añadir constantemente cambiantes cuerdas hasta el final de los archivos solicitados. Por ejemplo:

<script type="text/javascript" src="main.js?v=12392823"></script>

Actualizar 2012

Esta es una vieja pregunta, pero creo que necesita una mayor respuesta hasta la fecha, porque ahora hay una manera de tener un mayor control de la página web de almacenamiento en caché.

Desconectado aplicaciones Web (que es en realidad cualquier sitio web HTML 5) applicationCache.swapCache() se puede utilizar para actualizar la versión en caché de su sitio web sin la necesidad de manualmente volver a cargar la página.

Este es un ejemplo de código de la Guía para principiantes para el uso de la caché de la aplicación en HTML5 es explicar cómo actualizar los usuarios a la nueva versión de su sitio:

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

Véase también Uso de la caché de la aplicación en Mozilla Developer Network para obtener más información.

Actualizar 2016

Las cosas cambian rápidamente en la Web. Esta pregunta se hizo en 2009 y en 2012 ha publicado una actualización de una nueva manera de manejar el problema descrito en la pregunta. Otros 4 años pasaron y ahora parece que ya está en desuso. Gracias a cgaldiolo por señalarlo en los comentarios.

En la actualidad, a partir de julio de 2016, los, Sección 7.9, aplicaciones web HTML estándar Desconectado incluye una advertencia desaprobación:

Esta característica está en el proceso de ser retirado de la plataforma Web. (Este es un proceso largo que lleva muchos años.) El uso de cualquiera de las características de la aplicación Web fuera de línea en este momento es sumamente desalentador. Utilice los trabajadores del servicio en su lugar.

Lo mismo sucede con el uso de caché de la aplicación en Mozilla Developer Network que se hace referencia en 2012:

Desfasada
Esta característica se ha eliminado de los estándares Web. Aunque algunos navegadores pueden todavía apoyarlo, es en el proceso de que se cayó. No lo utilice en proyectos viejos o nuevos. Páginas o aplicaciones web el uso que puede romperse en cualquier momento.

1204581 - Añadir un aviso de desaprobación para AppCache si trabajador del servicio de buscar a la interceptación se habilita .

No es como tal. Un método consiste en enviar las cabeceras apropiadas cuando la entrega de contenido para forzar al navegador a cargar:

asegurándose de que una página web no es caché, en todos los navegadores.

Si su búsqueda de "cache header" o algo similar aquí en SO, encontrará ASP.NET ejemplos específicos.

Otra forma, menos limpio pero a veces sólo si no puede controlar los encabezados en el lado del servidor, es la adición de un parámetro GET al azar al recurso que se está llamando:

myimage.gif?random=1923849839

Para los recursos estáticos a la derecha de almacenamiento en caché sería el uso de los parámetros de la consulta con el valor de cada implementación o la versión del archivo.Esto tendrá el efecto de limpieza de la memoria caché después de cada implementación.

/Content/css/Site.css?version={FileVersionNumber}

Aquí es ASP.NET MVC ejemplo.

<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

No te olvides de actualizar la versión de ensamblado.

he tenido problema similar y así es como lo resolví:

En el archivo index.html He añadido manifiesta:
```
<html manifest="cache.manifest">
```
En la sección <head> script incluido la actualización de la memoria caché:
```
<script type="text/javascript" src="update_cache.js"></script>
```
función onload
En la sección <body> he insertado:
```
<body onload="checkForUpdate()">
```
En cache.manifest He puesto todos los archivos que quiere almacenar. Es importante ahora que funciona en mi caso (Apache) simplemente actualizando cada vez que la "versión" comentario. También es una opción para nombrar los archivos con "? Ver = 001" o algo al final del nombre pero es No es necesario . Cambiando simplemente # version 1.01 desencadena evento de actualización de memoria caché.
```
CACHE MANIFEST
# version 1.01
style.css
imgs/logo.png
#all other files
```
Es importante incluir 1., 2. y 3. puntos Sólo en index.html. De lo contrario
```
GET http://foo.bar/resource.ext net::ERR_FAILED
```
se produce porque cada archivo "niño" intenta almacenar en caché la página, mientras que la página ya se almacena en caché.

En el archivo update_cache.js He puesto este código:

function checkForUpdate()
{
    if (window.applicationCache != undefined && window.applicationCache != null)
    {
        window.applicationCache.addEventListener('updateready', updateApplication);
    }
}
function updateApplication(event)
{
    if (window.applicationCache.status != 4) return;
    window.applicationCache.removeEventListener('updateready', updateApplication);
    window.applicationCache.swapCache();
    window.location.reload();
}

Ahora que acaba de cambiar los archivos y en el manifiesto que tenga que actualizar la versión comentario. Ahora visitar la página index.html actualizará la caché.

Las partes de solución no son míos, pero los he encontrado a través de Internet y ponen juntos para que funcione.

tuve un caso en el que me gustaría tomar fotos de los clientes en línea y tendría que actualizar el div si se cambia una foto. Navegador seguía mostrando la vieja foto. Por lo que utiliza el truco de llamar a una variable GET al azar, lo que sería única cada vez. Aquí es si podría ayudar a nadie

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

EDITAR Como se ha señalado por otros, que sigue es mucho más eficiente solución ya que se volverá a cargar imágenes sólo cuando se cambian, la identificación de este cambio por el tamaño de archivo:

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

Una gran cantidad de respuestas no viene al caso - la mayoría de los desarrolladores son conscientes de que a desactivar la caché es ineficiente. Sin embargo, hay muchas circunstancias comunes donde la eficiencia es poco importante y el comportamiento predeterminado de la caché es ineficaz.

Estos incluyen anidado, prueba iterativa guión (el grande!) Y rotas soluciones de software de terceros. Ninguna de las soluciones que se dan aquí son adecuadas para abordar este tipo de situaciones comunes. La mayoría de los navegadores web son el almacenamiento en caché demasiado agresivo y no proporcionan medios sensibles para evitar estos problemas.

<meta http-equiv="pragma" content="no-cache" />

También vea https: //stackoverflow.com/questions/126772/how-to-force-a-web-browser-not-to-cache-images

No estoy seguro si que realmente le pueden ayudar, pero así es como el almacenamiento en caché debería funcionar en cualquier navegador. Cuando la petición del navegador un archivo, siempre debe enviar una solicitud al servidor a menos que haya un modo "fuera de línea". El servidor leerá algunos parámetros como la fecha de modificación o etags.

El servidor devolverá una respuesta 304 de error para no modificado y el navegador tendrá que utilizar su caché. Si el etag no valida en el lado del servidor o la fecha de modificación es inferior a la fecha de modificación actual, el servidor debería devolver el nuevo contenido con la nueva fecha o etags modificado o ambos.

Si no hay datos de almacenamiento en caché enviados al navegador, supongo que el comportamiento es indeterminada, el navegador puede o no puede almacenar en caché de archivos que no cuentan cómo se almacenan en caché. Si ajusta los parámetros de almacenamiento en caché en la respuesta va a almacenar en caché los archivos correctamente y el servidor, entonces puede optar por devolver un error 304, o el nuevo contenido.

Esta es la forma en que debe hacerse. El uso de números aleatorios params o la versión en las URL es más como un truco que cualquier otra cosa.

http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http: //www.xpertdeveloper. com / 2011/03 / última modificación-header-vs-expirará-header-vs-etag /

Después de la lectura vi que también hay una fecha de caducidad. Si usted tiene un problema, podría ser que usted ha establecido una fecha de caducidad. En otras palabras, cuando el navegador va a almacenar en caché el archivo, ya que tiene una fecha de caducidad, no debería tener que solicitar de nuevo antes de esa fecha. En otras palabras, nunca le pedirá el archivo en el servidor y nunca recibirá un 304 sin modificar. Simplemente se utilizará el caché hasta la fecha de caducidad se alcanza o se borra la memoria caché.

Así que esa es mi suposición, usted tiene algún tipo de fecha de caducidad y que puedes usar etags de la última modificación o una mezcla de todo y asegurarse de que no hay es la fecha de vencimiento.

Si la gente tiende a refrescar mucho y el archivo no se cambian mucho, entonces podría ser conveniente establecer una gran fecha de caducidad.

Mis 2 centavos!

La actualización de la URL para las siguientes obras para mí:

/custom.js?id=1

Mediante la adición de un número único después de ?id= y incrementándolo para los nuevos cambios, los usuarios no tienen que presionar CTRL + F5 para refrescar la memoria caché. Como alternativa, puede anexar control o de cadena de versión de la hora actual o época después ?id=

Algo así como ?id=1520606295

Aquí es la página de MSDN sobre la configuración de almacenamiento en caché en ASP.NET.

Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True

If Response.Cache.VaryByParams("Category") Then
   '...
End If

He implementado esta solución simple que funciona para mí (todavía no está en el entorno de producción):

function verificarNovaVersio() {
    var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
    $.ajax({
        url: "./versio.txt"
        , dataType: 'text'
        , cache: false
        , contentType: false
        , processData: false
        , type: 'post'
     }).done(function(sVersioFitxer) {
        console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
        if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
            localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
            location.reload(true);
        }
    });
}

Tengo un pequeño archivo que se encuentra en que el HTML son:

"versio.txt":

v00.5.0014

Esta función se llama en todas mis páginas, por lo que cuando la carga se comprueba si el valor de la versión de la localStorage es inferior a la versión actual y hace un

location.reload(true);

... para forzar la recarga del servidor en lugar de la memoria caché.

(obviamente, en lugar de localStorage puede utilizar cookies u otros medios de almacenamiento persistente cliente)

Yo he optado por esta solución por su sencillez, porque sólo manteniendo un único archivo "versio.txt" obligará al sitio completo para recargar.

El método queryString es difícil de implementar y también se almacena en caché (si cambia de v1.1 a una versión anterior se carga desde la memoria caché, entonces significa que el caché no se vacía, manteniendo todas las versiones anteriores en caché).

Estoy un poco novato y me apreciate su cheque profesional y reseña para asegurar que mi método es un buen enfoque.

Espero que ayuda.

Además de establecer Cache-Control: no-cache, también debe establecer el encabezado Caduca a -1 si desea que la copia local que se actualiza cada vez (algunas versiones de IE parecen requerir esto)

HTTP Cache - consulte con el servidor, enviando siempre If-Modified-Since

Hay un truco que puede ser utilizado.Una truco es añadir un parámetro / cadena para el nombre del archivo en la etiqueta script y cambiarlo cuando presenta cambios.

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

El navegador interpreta toda la cadena como la ruta del archivo a pesar de lo que viene después de la "?" son parámetros. Así wat sucede ahora es que la próxima vez que actualice el archivo que acaba de cambiar el número de la etiqueta de script en su sitio web (Ejemplo <script src="myfile.js?version=1.0.1"></script>) y cada navegador del usuario verá el archivo ha cambiado y tomar una nueva copia.

navegadores Fuerza para borrar la memoria caché o vuelva a cargar los datos correctos? He probado la mayoría de las soluciones descritas en stackoverflow, un poco de trabajo, pero después de un rato, se hace caché con el tiempo y mostrar el guión previamente cargada o archivo. ¿Hay alguna otra forma que pueda borrar la memoria caché (CSS, JS, etc) y en realidad el trabajo en todos los navegadores?

he encontrado hasta ahora que los recursos específicos se pueden recargar de forma individual si cambia la fecha y la hora en sus archivos en el servidor. "Caché de compensación" no es tan fácil como debería ser. En lugar de borrar la memoria caché en mis navegadores, me di cuenta de que "tocar" los archivos del servidor de caché en realidad cambiar la fecha y hora de la caché archivo de origen en el servidor (probado en Edge, Chrome y Firefox) y la mayoría de los navegadores se descargarán automáticamente al máximo copia actual fresca de lo que esta en su servidor (código, gráficos ningún multimedia también). Le sugiero que acaba de copiar los guiones más actuales en el servidor y "hacer lo toque" solución antes de que su programa se ejecuta, por lo que va a cambiar la fecha de todos sus archivos de problemas para una fecha y hora más reciente , a continuación, se descarga una copia nueva de su navegador:

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

... entonces el resto de su programa ...

Me tomó un tiempo para resolver este problema (como muchos navegadores actúan de manera diferente a los diferentes comandos, pero todos los tiempos de verificación de los archivos y se compara con su copia descargada en su navegador, si es diferente fecha y hora, va a hacer la actualización) , Si no puede ir por el camino correcto supuesto, siempre hay otra solución utilizable y mejor a ella. Un saludo y feliz acampar. Por cierto toque (); o alternativas de trabajo en muchos lenguajes de programación incluido en javascript php fiesta sh y se puede incluir o llamarlos en html.

¿Quieres borrar la caché, o simplemente asegurarse de que su (cambiado?) La página actual no se almacena en caché?

En este último caso, debe ser tan simple como

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow