Pregunta

Cuando desarrollamos nuevos sitios o probamos cambios en otros nuevos que involucran CSS después de que se confirma el nuevo código y alguien va a verificar los cambios, siempre ve una versión en caché del CSS anterior.Esto está causando muchos problemas en las pruebas porque las personas nunca están seguras de tener el CSS más reciente en la pantalla (sé que cambiar y hacer clic en actualizar borra este caché, pero no puedo esperar que los usuarios finales sepan cómo hacerlo).¿Cuáles son mis posibles soluciones?

¿Fue útil?

Solución

Si está entregando su CSS desde archivos estáticos (o cualquier cosa para la que la cadena de consulta no sea importante), intente variar eso para asegurarse de que el navegador realice una nueva solicitud, ya que pensará que está extrayendo un recurso completamente diferente, por lo que tener por ejemplo:

"styles.css?token=1234" en la referencia de CSS en su marcado y cambie el valor de "token" en cada registro de CSS

Otros consejos

En su entorno de desarrollo, establezca el encabezado Expires mucho más bajo.En su entorno de producción, configúrelo en un nivel más alto y luego configúrelo en un nivel bajo aproximadamente una semana antes de realizar el lanzamiento.

No es una gran solución, pero ya solucioné esto a nivel de página agregando una cadena de consulta al final de la llamada al archivo CSS:

 <link href="/css/global.css?id=3939" type="text/css" rel="stylesheet" />

Luego, aleatorizaría el valor de identificación para que siempre cargue un valor diferente al cargar la página.Luego eliminaría este código antes de pasar a producción.Supongo que también podrías extraer el valor de un archivo de configuración, de modo que solo tenga que cargarse una vez por confirmación.

Respuestas similares (un poco más detalladas) dadas para la versión JavaScript de esta pregunta, que tiene el mismo problema/solución

Ayuda con el almacenamiento en caché agresivo de JavaScript

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top