¿Cómo actualizar una aplicación web sin sufrir problemas de CSS en caché?

Supongamos que tengo una aplicación web. Le agrego algunas características, y esas características requieren adiciones a algunos archivos CSS existentes en mi servidor web. Implemento mis nuevas funciones y adiciones de CSS a mi servidor, y funcionan muy bien. Sin embargo, los usuarios que visiten el sitio probablemente hayan guardado CSS en caché en su navegador, lo que significa que las nuevas características se verán rotas/raras hasta que se actualicen manualmente o caduque su caché. El problema puede ser aún peor si hay un servidor de caché entre mi servidor y el usuario, en cuyo caso incluso una actualización manual no ayudará (no creo).¿Cómo actualizar una aplicación web sin sufrir problemas de CSS en caché?

¿Hay alguna forma común de evitar esto?

EDITAR: Estoy ejecutando en ASP.NET 4.0.

Fuente

2012-06-29 Tom Hamming

Puede agregar un par de valores de nombres arbitrarios al final de su solicitud CSS y actuará como si no estuviera en la memoria caché. Por ejemplo:

<link media="all" href="myhomepage.css?sid=1" type="text/css" rel="stylesheet">

Cuando haga un cambio, cambie el valor del sid.

Fuente

2012-06-29 19:05:46 scrappedcola

¡Apruebo este método! –

No lo hago, porque no siempre funciona, ¡y es muy manual! Ver mi respuesta! –

@RichBradshaw Su método tiene sus propios problemas potenciales, como hacer una llamada al sistema de archivos en cada página vista. Es completamente posible hacer que esto sea menos manual, al tener 'sid' como una variable, por ejemplo. – ceejayoz

utilizo el siguiente con PHP en Apache:

function cssInclude($file) { 
    $fileMTime = filemtime($_SERVER['DOCUMENT_ROOT']."/media/css/".$file.".css"); 
    return "<link rel=\"stylesheet\" href=\"/media/css/{$file}.{$fileMTime}.css\" 
}

entonces en mi <head>:

<?= cssInclude("style"); ?>

Luego, en mi .htaccess:

RewriteEngine on 
RewriteRule ^media/(js|css|img|font)/(.+)\.(\d+)\.(js|css|png|jpg|gif)$ /media/$1/$2.$4 [L]

Básicamente lo que hace es hacer que el enlace tenga tiempo. Originalmente lo hice después del CSS usando un?, Como en style.css?12313123, pero encontré que algunos proxies no lo almacenaban en caché porque suponían que era dinámico, lo que lo hacía más lento (mi trabajo lo estropeaba por ejemplo).

Al escribirlo como style.123123123.css, parece como si fuera un archivo nuevo cada vez que se modifica y el almacenamiento en caché funciona bien.

Notarás que en mi .htaccess también me permito hacerlo para diferentes directorios, y para algunos formatos de archivo diferentes, personalízalo según sea necesario.

Por supuesto, esto significa que está leyendo cosas del sistema de archivos, pero si tiene una capa de almacenamiento en caché, esto solo se hace una vez por actualización.

Fuente

2012-06-29 19:06:26

Por supuesto que no conozco su configuración, ya que no lo menciona, pero suponiendo que tiene un contenedor de serlets como Tomcat, le aconsejaría echar un vistazo a Jawr. Su propósito, desde el sitio web: 'Jawr es una solución de empaque ajustable para Javascript y CSS ...'

Puede hacer mucho más de lo que usted solicitó, pero también implementa la idea de @ scrappedcola de manera totalmente automática. Los clientes verán una URL que contiene un hash de los contenidos (algo así como scripts_A5F68E2.js) que tiene propiedades para el almacenamiento en caché establecido para la eternidad. Cada vez que los contenidos cambian, el nombre también cambia, por lo que el cliente cargará los scripts de nuevo.

Fuente

2012-06-29 20:15:08

He actualizado la pregunta con mi plataforma (ASP.NET 4.0). –

En primer lugar, es una práctica común agregar una versión a los recursos que carga. Esto se puede hacer mediante un parámetro de versión o mediante el uso de marcos como yawr.

Si prefiere el primero y usa el control de la versión, puede ser una buena idea usar la versión de revisión de vcs como versión o, si lo hace, use esa versión que mejor se adapte a sus cambios.

En PHP o Python puede generar un archivo que contenga la cadena de versión y hacer referencia a ella en todos los archivos requeridos. Con Java o .NET es posible que desee tener un artefacto compilado en su lugar.

No pego el código de ejemplo como faltante en su configuración.

Fuente

2012-06-29 20:31:01 modebm

He actualizado la pregunta con mi plataforma (ASP.NET 4). –

Entonces yo recomendaría usar la versión de ensamblaje. Solo tienes que acceder a él en tus vistas. – modebm

¿Cómo actualizar una aplicación web sin sufrir problemas de CSS en caché?

Respuesta

Cuestiones relacionadas