una recargar pagina navegadores navegador los limpiar forzar evitar chrome caché cache borrar aplicación actualizar html caching browser meta-tags

recargar - no cache html5



Forzar navegador para borrar la caché (17)

¿Hay alguna manera de poner un código en mi página para que cuando alguien visita un sitio, borre la memoria caché del navegador y pueda ver los cambios?

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

Actualización 2012

Esta es una pregunta antigua, pero creo que necesita una respuesta más actualizada porque ahora hay una manera de tener más control del almacenamiento en caché de sitios web.

En Aplicaciones web sin conexión (que en realidad es cualquier sitio web HTML5 applicationCache.swapCache() se puede usar applicationCache.swapCache() para actualizar la versión en caché de su sitio web sin la necesidad de volver a cargar la página manualmente.

Este es un ejemplo de código de la Guía para principiantes sobre el uso del caché de aplicaciones en HTML5 Rocks que explica cómo actualizar a los usuarios a la versión más reciente 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);

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

Actualización 2016

Las cosas cambian rápidamente en la web. Esta pregunta se hizo en 2009 y en 2012 publiqué una actualización sobre una nueva forma de manejar el problema descrito en la pregunta. Pasaron otros 4 años y ahora parece que ya está en desuso. Gracias a CGaldiolo por señalarlo en los comentarios.

Actualmente, a partir de julio de 2016, el estándar HTML, Sección 7.9, aplicaciones web sin conexión incluye una advertencia de desaprobación:

Esta característica está en proceso de ser eliminada de la plataforma web. (Este es un proceso largo que lleva muchos años). El uso de cualquiera de las funciones de la aplicación web fuera de línea en este momento no se recomienda. Utilice trabajadores de servicio en su lugar.

Lo mismo ocurre con el uso del caché de la aplicación en la red de desarrolladores de Mozilla a la que hice referencia en 2012:

Obsoleto
Esta característica ha sido eliminada de los estándares web. Aunque algunos navegadores aún lo admiten, está en proceso de ser descartado. No lo uses en proyectos antiguos o nuevos. Las páginas o aplicaciones web que lo utilizan pueden romperse en cualquier momento.

Ver también Error 1204581 - Agregar un aviso de desaprobación para AppCache si la intercepción de recuperación del trabajador del servicio está habilitada .

¿Desea borrar el caché o simplemente asegurarse de que su página actual (modificada?) No esté en caché?

Si este último, debería ser tan simple como

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

A muchas respuestas les falta el punto: la mayoría de los desarrolladores son conscientes de que desactivar el caché es ineficaz. Sin embargo, hay muchas circunstancias comunes en las que la eficiencia no es importante y el comportamiento predeterminado de la memoria caché está muy dañado.

Éstas incluyen pruebas de script iterativas y anidadas (¡la más grande!) Y soluciones temporales de software de terceros. Ninguna de las soluciones que se ofrecen aquí son adecuadas para abordar estos escenarios comunes. La mayoría de los navegadores web son demasiado agresivos y no proporcionan medios razonables para evitar estos problemas.

Actualizar la URL a los siguientes trabajos para mí:

/custom.js?id=1

Al agregar un número único después de ?id= e incrementarlo para nuevos cambios, los usuarios no tienen que presionar CTRL + F5 para actualizar la caché. Alternativamente, puede agregar la versión de hash o cadena de la hora actual o Epoch after ?id=

Algo como ?id=1520606295

Busque en el cache-control y cache-control etiqueta META.

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

Otra práctica común es agregar cadenas que cambian constantemente al final de los archivos solicitados. Por ejemplo:

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

Hay un truco que se puede usar. El truco consiste en adjuntar un parámetro / cadena al nombre del archivo en la etiqueta del script y cambiarlo cuando se archivan los cambios.

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

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

Implementé esta solución simple que me funciona (aún no 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 ubicado donde están los html:

"versio.txt":

v00.5.0014

Se llama a esta función en todas mis páginas, de modo que al cargarla, comprueba si el valor de la versión de localStorage es más bajo que la versión actual y realiza una

location.reload(true);

... forzar la recarga del servidor en lugar del caché.

(obviamente, en lugar de localStorage puede usar cookies u otro almacenamiento de cliente persistente)

Opté por esta solución por su simplicidad, porque solo el mantenimiento de un único archivo "versio.txt" forzará la recarga del sitio completo.

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, la carga de la caché significa que la caché no se vacía, manteniendo todas las versiones anteriores en la caché).

Soy un poco novato y apreciaría su revisión y revisión profesional para garantizar que mi método sea un buen enfoque.

Espero eso ayude.

No como tal. Un método es enviar los encabezados apropiados cuando se entrega contenido para forzar al navegador a volver a cargar:

Asegurarse de que una página web no esté en caché, en todos los navegadores.

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

Otra forma, menos limpia pero a veces única, si no puede controlar los encabezados en el lado del servidor, es agregar un parámetro GET aleatorio al recurso que se está llamando:

myimage.gif?random=1923849839

No estoy seguro de si eso realmente podría ayudarte, pero así es como debería funcionar el almacenamiento en caché en cualquier navegador. Cuando el navegador solicita 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 de error 304 para NO MODIFICADO y el navegador tendrá que usar su caché. Si el etag no se valida en el lado del servidor o la fecha de modificación está por debajo de la fecha de modificación actual, el servidor debe devolver el nuevo contenido con la nueva fecha de modificación o etags o ambos.

Si no hay datos de almacenamiento en caché enviados al navegador, creo que el comportamiento es indeterminado, el navegador puede o no almacenar en caché un archivo que no indique cómo se almacenan en la memoria caché. Si establece parámetros de almacenamiento en caché en la respuesta, almacenará en caché sus archivos correctamente y el servidor podrá elegir devolver un error 304, o el nuevo contenido.

Asi es como debería de hacerse. El uso de parámetros aleatorios o el número de versión en las URL es más como un hack que cualquier otra cosa.

http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs-expire-header-vs-etag/

Después de leer vi que también hay una fecha de caducidad. Si tiene un problema, es posible que tenga configurada una fecha de caducidad. En otras palabras, cuando el navegador almacenará en caché su archivo, ya que tiene una fecha de caducidad, no debería tener que volver a solicitarlo antes de esa fecha. En otras palabras, nunca solicitará el archivo al servidor y nunca recibirá un 304 no modificado. Simplemente utilizará el caché hasta que se alcance la fecha de caducidad o se borre el caché.

Así que, supongo, tienes algún tipo de fecha de caducidad y deberías usar etags de última modificación o una combinación de todos ellos y asegurarte de que no haya una fecha de caducidad.

Si la gente tiende a refrescarse mucho y el archivo no se modifica mucho, entonces sería aconsejable establecer una fecha de vencimiento grande.

Mis 2 centavos!

Para los recursos estáticos, el almacenamiento en caché correcto sería utilizar parámetros de consulta con el valor de cada implementación o versión de archivo. Esto tendrá el efecto de borrar el caché después de cada implementación.

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

Aquí está el ejemplo de ASP.NET MVC.

<link href="@Url.Content("~/Content/Css/Reset.css")[email protected]().Assembly.GetName().Version" rel="stylesheet" type="text/css" />

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

Tenía un caso en el que tomaría fotos de clientes en línea y necesitaría actualizar el div si se cambia una foto. El navegador aún mostraba la foto antigua. Así que usé el truco de llamar una variable GET aleatoria, que sería única cada vez. Aquí está si pudiera ayudar a alguien.

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

EDITAR Como lo señalaron otros, la siguiente es una solución mucho más eficiente, ya que recargará las imágenes solo cuando se modifiquen, identificando este cambio por el tamaño del archivo:

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

Tuve un problema similar y así lo resolví:

  1. En el archivo index.html he añadido manifiesto:

    <html manifest="cache.manifest">

  2. En la sección <head> incluimos el script actualizando el caché:

    <script type="text/javascript" src="update_cache.js"></script>

  3. En la sección <body> he insertado la función onload:

    <body onload="checkForUpdate()">

  4. En cache.manifest he puesto todos los archivos que quiero almacenar. Es importante ahora que funciona en mi caso (Apache) simplemente actualizando cada vez que comenta la "versión". También es una opción para nombrar archivos con "? Ver = 001" o algo al final del nombre pero no es necesario . Cambiar solo # version 1.01 activa el evento de actualización de caché.

    CACHE MANIFEST # version 1.01 style.css imgs/logo.png #all other files

    Es importante incluir 1., 2. y 3. puntos solo en index.html. De otra manera

    GET http://foo.bar/resource.ext net::ERR_FAILED

    ocurre porque cada archivo "secundario" intenta almacenar en caché la página mientras la página ya está en caché.

  5. 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 solo cambia los archivos y en el manifiesto debe actualizar el comentario de la versión. Ahora visitando la página index.html actualizará el caché.

Las partes de la solución no son mías, pero las encontré en Internet y las armé para que funcionen.

Here está la página MDSN sobre la configuración del 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

¿Forzar los navegadores para borrar el caché o volver a cargar los datos correctos? He probado la mayoría de las soluciones descritas en , algunas funcionan, pero después de un tiempo, finalmente se almacena en caché y muestra el script o archivo cargado anteriormente. ¿Hay alguna otra forma de borrar el caché (css, js, etc.) y funcionar en todos los navegadores?

Descubrí hasta ahora que los recursos específicos se pueden recargar individualmente si cambia la fecha y la hora en sus archivos en el servidor. "Borrar caché" no es tan fácil como debería ser. En lugar de borrar la memoria caché de mis navegadores, me di cuenta de que "tocar" los archivos del servidor almacenados en la memoria caché cambiará la fecha y la hora del archivo fuente almacenado en la memoria caché del servidor (Probado en Edge, Chrome y Firefox) y la mayoría de los exploradores descargarán automáticamente actual copia actualizada de lo que está en su servidor (código, gráficos y multimedia también). Le sugiero que simplemente copie los scripts más actuales en el servidor y "haga lo que sea" antes de que su programa se ejecute, para que cambie la fecha de todos sus archivos de problemas a la fecha y hora más actual, luego descargue una copia nueva. a su navegador:

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

entonces ... el resto de tu programa ...

Me tomó algo de tiempo resolver este problema (ya que muchos navegadores actúan de manera diferente a diferentes comandos, pero todos ellos verifican la hora de los archivos y se comparan con su copia descargada en su navegador, si la fecha y la hora son diferentes, se actualizará). no puede seguir el camino correcto, siempre hay otra solución utilizable y mejor. Saludos cordiales y feliz camping. Por cierto toque (); o las alternativas funcionan en muchos lenguajes de programación incluidos en javascript bash sh php y puede incluirlos o llamarlos en html.

Si se trata de cambios en .css y .js , una forma es " _versionNo caché" agregando algo como " _versionNo " al nombre de archivo de 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 del nombre del 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.

Puede consultar este link para ver cómo podría funcionar.