Obligar al navegador a actualizar CSS, JavaScript, etc.

Estoy desarrollando un sitio web basado en el código fuente de Wordpress a través de XAMPP. A veces cambio el código CSS, los scripts o algo más y noto que mi navegador tarda en aplicar las modificaciones. Esto me lleva a usar varios navegadores para actualizar uno y si no aplica los nuevos estilos, pruebo el segundo y siempre es así.

¿Hay alguna forma de evitar este problema? A veces cambio de código sin darme cuenta de las modificaciones anteriores.

Solución general

Presionando Ctrl+ F5(o Ctrl+ Shift+ R) para forzar una recarga de caché. Creo que las Mac usan Cmd+ Shift+ R.

PHP

En PHP, puede deshabilitar el caché configurando la fecha de vencimiento en un tiempo en el pasado con encabezados:

header("Expires: Tue, 01 Jan 2000 00:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

Cromo

La caché de Chrome se puede deshabilitar abriendo las herramientas de desarrollador con F12, haciendo clic en el ícono de ajustes en la esquina inferior derecha y seleccionando Deshabilitar caché en el cuadro de diálogo de configuración, así:

^{Imagen tomada de esta respuesta .}

Firefox

Escriba about:configen la barra de URL y luego busque la entrada titulada network.http.use-cache. Establezca esto en false.

Si desea evitar eso en el lado del cliente, puede agregar algo como ?v=1.xel enlace del archivo css, cuando se cambia el contenido del archivo. por ejemplo, si lo hubiera <link rel="stylesheet" type="text/css" href="css-file-name.css">, puede cambiarlo a <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">esto omitirá el almacenamiento en caché.

Si puede escribir php, puede escribir:

<script src="foo.js<?php echo '?'.mt_rand(); ?>" ></script>
<link rel="stylesheet" type="text/css" href="foo.css<?php echo '?'.mt_rand(); ?>" />
<img src="foo.png<?php echo '?'.mt_rand(); ?>" />

¡Siempre se actualizará!

EDITAR: Por supuesto, no es realmente práctico para un sitio web completo, ya que no agregaría esto manualmente para todo.

Compruebe esto: ¿Cómo fuerzo al navegador a utilizar la versión más reciente de mi hoja de estilo?

Suponiendo que su archivo css es foo.css, puede obligar al cliente a usar la última versión agregando una cadena de consulta como se muestra a continuación.

<link rel="stylesheet" href="foo.css?v=1.1">

Punto de vista del desarrollador
Si está en modo de desarrollo (como en la pregunta original), el mejor enfoque es deshabilitar el almacenamiento en caché en el navegador mediante metaetiquetas HTML. Para que este enfoque sea universal, debe insertar al menos tres metaetiquetas como se muestra a continuación.

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

De esta forma, usted como desarrollador, solo necesita actualizar la página para ver los cambios. Pero no olvide comentar ese código cuando esté en producción, después de todo, el almacenamiento en caché es algo bueno para sus clientes.

Modo de producción
Debido a que en producción permitirá el almacenamiento en caché y sus clientes no necesitan saber cómo forzar una recarga completa o cualquier otro truco, debe garantizar que el navegador cargará el nuevo archivo. Y sí, en este caso, el mejor enfoque que conozco es cambiar el nombre del archivo.

<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>

Se actualizará si se modifica.

Asegúrese de que esto no esté sucediendo desde su DNS. Por ejemplo, Cloudflare lo tiene donde puede activar el modo de desarrollo donde fuerza una purga en sus hojas de estilo e imágenes, ya que Cloudflare ofrece caché acelerado. Esto lo desactivará y lo obligará a actualizarse cada vez que alguien visite su sitio.

Intente borrar la caché de su navegador.

Puede desactivar el almacenamiento en caché con la barra de herramientas para desarrolladores web de Firefox.

Esta extensión de Firefox fue la única solución que pude hacer funcionar: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/

La respuesta aceptada arriba es correcta. Sin embargo, si solo desea recargar el caché periódicamente y está utilizando Firefox, las herramientas de desarrollador web (en el elemento del menú Herramientas a partir de noviembre de 2015) ofrecen una opción de red. Esto incluye un botón de recarga. Seleccione Recargar para restablecer la caché una vez.

Si desea asegurarse de que Chrome actualice correctamente estos archivos para todos los usuarios, debe tener must-revalidateen el Cache-Controlencabezado. Esto hará que Chrome vuelva a comprobar los archivos para ver si es necesario recuperarlos.

Recomendar el siguiente encabezado de respuesta:

Cache-Control: must-validate

Esto le dice a Chrome que verifique con el servidor y vea si hay un archivo más nuevo. Si hay un archivo más reciente, lo recibirá en la respuesta. De lo contrario, recibirá una respuesta 304 y la seguridad de que el que está en la caché está actualizado.

Si NO configura este encabezado, en ausencia de cualquier otra configuración que invalide el archivo, Chrome nunca consultará con el servidor para ver si hay una versión más nueva.

Aquí hay una publicación de blog que analiza el tema más a fondo.

En lugar de la etiqueta de enlace en html-head a un archivo css externo, use php-include:

<style>
<?php
include("style.css");
?>      
</style>

Es una especie de truco, pero funciona para mí :)

Decidí que, dado que los navegadores no buscan nuevas versiones de archivos css y js, cambio el nombre de mis directorios css y js cada vez que hago un cambio. Utilizo css1 a css9 y js1 a js9 como nombres de directorio. Cuando llego al 9, empiezo de nuevo desde el 1. Es una molestia, pero siempre funciona perfectamente. Es ridículo tener que decirle a los usuarios que escriban.

Tengo un caso en el que necesito poder crear y cambiar mis hojas de estilo de forma remota que afecten a miles de clientes, pero debido al riesgo de una gran carga de red, no apago el caché.

Como puedo cambiar el contenido HTML de forma remota, luego vinculo la hoja de estilo con un código hash que coincida con el contenido de la hoja de estilo.

https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808

Dicho esto, también utilizo una función de JavaScript del lado del cliente para reemplazar cuidadosamente los nodos y atributos cuando el contenido HTML cambia, lo que significa que la etiqueta de enlace de la hoja de estilo no se reemplazará, solo cambiará el atributo href.

Este escenario funciona bien en Chrome, Firefox y Edge en Windows, también Chrome en Android, pero para mi sorpresa, no siempre funciona en clientes web en Android. Así que estoy más o menos buscando algo para forzar / activar la actualización usando javascript, de manera óptima sin necesidad de volver a cargar la página.

Prueba esto:

link href="styles/style.css?=time()" rel="stylesheet" type="text/css"

Si necesita algo después del '?' que es diferente cada vez que se accede a la página, entonces time()lo hará. Dejar esto en su código de forma permanente no es realmente una buena idea, ya que solo ralentizará la carga de la página y probablemente no sea necesario.

Descubrí que forzar una actualización de la hoja de estilo es útil si ha realizado cambios importantes en el diseño de una página y acceder a la nueva hoja de estilo es vital para que aparezca algo sensato en la pantalla.