Obligar al navegador a actualizar CSS, JavaScript, etc.


86

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.


3
Caché de navegadores. Cada vez que realice cambios en CSS, JavaScript y esté viendo la página que ha actualizado, verá esta preocupación. Puede forzar una actualización presionando CTRL + F5 en el navegador y obtendrá la última versión. Descubrí que Chrome a veces requiere esa secuencia un par de veces ...
agente

también puede borrar la caché del navegador mediante programación
Pawan


Respuesta aquí: Respuesta de Fermín .
JWC

Respuestas:


107

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í:

ingrese la descripción de la imagen aquí
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.


Gracias JamWaffles por la descripción detallada y gracias a todos por las respuestas. Muchas gracias.
user1511579

En versiones recientes de Chrome: CTRL + R.
Alix Axel

1
Para Chrome, la interfaz que compartiste cambió un poco. Simplemente presione la pestaña Red y encontrará la casilla de verificación allí.
Baz Guvenkaya

5
FYI: para Opera en Mac es cmd-alt-R
Derwent

52

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é.


1
Buen punto, pero el navegador siempre pregunta sobre el archivo. Por supuesto, el servidor devolverá "304 Not Modified".
Andrzej Jozwik

@ajozwik Probé con Firefox 26.0 y Chromium 31.0.1650.57. Como dijiste, Firefox de hecho hace una nueva consulta cada vez que la URL CSS contiene un signo de interrogación (y el servidor da la respuesta 304 con el cuerpo vacío); Firefox no realiza una nueva consulta si la URL de CSS no contiene un signo de interrogación. Chromium no realiza una nueva consulta incluso con un signo de interrogación. Probablemente esto pueda considerarse un error de Firefox.
Jaan

no funciona a mis amigos de esta manera. Solo si el nombre del archivo es diferente. ¿Por qué tantos votos a favor?
Gediminas

Encontré en muchos otros lugares el mismo enfoque dado en esta respuesta, creo que esto funcionó en el pasado pero ya no funciona. Si está en modo de desarrollo, el mejor enfoque universal es deshabilitar el almacenamiento en caché en el navegador mediante metaetiquetas HTML. Vea mi respuesta a continuación.
ePi272314

9

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.


¡No funciona de esta manera! Solo si el nombre del archivo es diferente, el navegador se vuelve a cargar. O tal vez con esta sugerencia solo para algunos navegadores, si te ha funcionado
Gediminas


5

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.


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

Se actualizará si se modifica.


Muy buena solución para todos aquellos proyectos que no utilizan webpack o una herramienta de empaquetado que agrega automáticamente versiones a los recursos.
Richi González

No lo rechacé, pero esta solución no funciona bien en la última versión de Chrome a partir de hoy, todavía recupera la versión anterior del archivo JavaScript
Mikaël Mayer

1

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.



0

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



0

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.


0

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.


0

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í :)


1
¿Consideró que el OP podría no usar php?
Oram

0

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.


0

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.


-1

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.


1
¡No funciona de esta manera! Solo si el nombre del archivo es diferente, el navegador se vuelve a cargar. O tal vez con esta sugerencia solo funciona para algunos navegadores, si te ha funcionado. Downvote
Gediminas
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.