2012-06-29 11 views
5

Dire che ho un'app web. Aggiungo alcune funzionalità ad esso, e quelle funzionalità richiedono aggiunte ad alcuni file CSS esistenti sul mio server web. Distribuisco le mie nuove funzionalità e aggiunte CSS al mio server e funzionano perfettamente. Gli utenti che visitano il sito probabilmente avranno CSS nella cache nel loro browser, tuttavia, il che significa che le nuove funzionalità appariranno non funzionanti/bizzarre fino a quando non aggiorneranno manualmente la pagina o la loro cache scade. Il problema potrebbe essere anche peggiore se c'è un server cache tra il mio server e l'utente, nel qual caso anche un aggiornamento manuale non aiuterà (non credo).Come aggiornare un'app Web senza problemi di CSS memorizzati nella cache?

C'è un modo comune per evitare questo?

MODIFICA: lavoro su ASP.NET 4.0.

risposta

6

È possibile aggiungere una coppia di valori nome arbitrario alla fine della richiesta di css e agirà come se non fosse memorizzata nella cache. Ad esempio:

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

Quando si modifica, modificare il valore sid.

+2

Approvo questo metodo! –

+0

Io no, perché non sempre funziona, ed è molto manuale! Guarda la mia risposta! –

+1

@RichBradshaw Il tuo metodo ha i suoi potenziali problemi, come fare una chiamata al filesystem su ogni visualizzazione di pagina. È del tutto possibile rendere questo meno manuale, avendo per esempio 'sid' come variabile. – ceejayoz

0

Io uso il seguente con PHP in Apache:

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

poi nella mia <head>:

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

Poi nel mio .htaccess:

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

Essenzialmente Quello che fa è fai in modo che il link abbia il tempo. Originariamente l'ho fatto dopo che il CSS utilizzava un?, Come in style.css?12313123, ma ho scoperto che alcuni proxy non lo memorizzavano in quanto ritenevano che fosse dinamico, rendendolo più lento (il mio lavoro lo incasinò per esempio).

Scrivendolo come style.123123123.css appare come se fosse un nuovo file ogni volta che viene modificato e il caching funziona correttamente.

Si noterà che nel mio .htaccess mi sto anche permettendo di farlo per diverse directory, e per alcuni formati di file diversi - personalizzarlo secondo necessità.

Ovviamente questo significa che stai leggendo materiale dal filesystem, ma se hai un livello di memorizzazione nella cache, questo viene fatto solo una volta per aggiornamento.

1

Naturalmente non conosco il tuo setup, dato che non ne parli, ma supponendo che tu abbia un contenitore Serlet come Tomcat ti consiglierei di dare un'occhiata a Jawr. Il suo scopo, dal sito web: 'Jawr è una soluzione di packaging sintonizzabile per Javascript e CSS ...'

Può fare molto più di quello che hai chiesto, ma implementa anche l'idea di @ scrappedcola in modo completamente automatico. I client vedranno un URL contenente un hash dei contenuti (qualcosa come scripts_A5F68E2.js) che ha proprietà per la memorizzazione nella cache impostata sull'eternità. Ogni volta che il contenuto cambia, cambia anche il nome, quindi il client caricherà nuovamente gli script.

+0

Ho aggiornato la domanda con la mia piattaforma (ASP.NET 4.0). –

1

Prima di tutto è prassi comune aggiungere una versione alle risorse caricate. Questo può essere fatto con un parametro di versione o usando framework come yawr.

Se si preferisce il primo e si utilizza il controllo di versione, potrebbe non essere una cattiva idea utilizzare la versione di vcs revision come versione o - se si utilizza il ciclo di rilascio, utilizzare quella versione che potrebbe corrispondere meglio alle modifiche.

In PHP o Python è possibile generare un file contenente la stringa di versione e fare riferimento ad esso in tutti i file richiesti. Con Java o .NET potresti voler disporre di un artefatto compilato.

Non incollo il codice di esempio a causa della mancanza della configurazione.

+0

Ho aggiornato la domanda con la mia piattaforma (ASP.NET 4). –

+0

Quindi suggerirei di utilizzare la versione di assemblaggio. Devi solo accedervi nelle tue visualizzazioni. – modebm

Problemi correlati