Sto sviluppando un sito web basato sul codice sorgente di Wordpress tramite XAMPP. A volte cambio il codice CSS, gli script o qualcos'altro e noto che il mio browser impiega tempo per applicare le modifiche. Questo mi porta ad utilizzare più browser per aggiornarne uno e se non applico i nuovi stili provo il secondo ed è sempre questo.
C'è un modo per evitare questo problema? A volte sto cambiando codice senza preavviso delle modifiche precedenti.
Risposte:
Premendo Ctrl+ F5(o Ctrl+ Shift+ R) per forzare un ricaricamento della cache. Credo che i Mac utilizzino Cmd+ Shift+ R.
In PHP, puoi disabilitare la cache impostando la data di scadenza su un tempo passato con le intestazioni:
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");
La cache di Chrome può essere disabilitata aprendo gli strumenti per sviluppatori con F12, facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a destra e selezionando Disabilita cache nella finestra di dialogo delle impostazioni, in questo modo:
Immagine tratta da questa risposta .
Digita about:confignella barra degli URL, quindi trova la voce intitolata network.http.use-cache. Impostalo su false.
Se vuoi evitarlo sul lato client puoi aggiungere qualcosa come ?v=1.xal collegamento del file css, quando il contenuto del file viene modificato. per esempio se ci fosse <link rel="stylesheet" type="text/css" href="css-file-name.css">puoi cambiarlo in <link rel="stylesheet" type="text/css" href="css-file-name.css?v=1.1">questo bypassando la cache.
Se puoi scrivere in php, puoi scrivere:
<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(); ?>" />
Si aggiornerà sempre!
EDIT: Ovviamente, non è davvero pratico per un intero sito Web, poiché non lo aggiungeresti manualmente per tutto.
Controlla questo: come faccio a forzare il browser a utilizzare la versione più recente del mio foglio di stile?
Supponendo che il tuo file css sia foo.css, puoi forzare il client a utilizzare l'ultima versione aggiungendo una stringa di query come mostrato di seguito.
<link rel="stylesheet" href="foo.css?v=1.1">
Punto di vista dello sviluppatore
Se sei in modalità sviluppo (come nella domanda originale), l'approccio migliore è disabilitare la memorizzazione nella cache nel browser tramite meta tag HTML. Per rendere universale questo approccio è necessario inserire almeno tre meta tag come mostrato di seguito.
<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" />
In questo modo, come sviluppatore, devi solo aggiornare la pagina per vedere le modifiche. Ma non dimenticare di commentare quel codice quando è in produzione, dopotutto il caching è una buona cosa per i tuoi clienti.
Modalità di produzione
Poiché in produzione consentirai la memorizzazione nella cache ei tuoi clienti non avranno bisogno di sapere come forzare un ricaricamento completo o qualsiasi altro trucco, devi garantire che il browser caricherà il nuovo file. E sì, in questo caso, l'approccio migliore che conosco è cambiare il nome del file.
<script src="foo.js?<?php echo date('YmdHis',filemtime('foo.js'));?>"></script>
Si aggiornerà se modificato.
Assicurati che questo non stia accadendo dal tuo DNS. Ad esempio, Cloudflare ha la possibilità di attivare la modalità di sviluppo in cui forza un'eliminazione dei fogli di stile e delle immagini poiché Cloudflare offre una cache accelerata. Questo lo disabiliterà e lo costringerà ad aggiornarsi ogni volta che qualcuno visita il tuo sito.
Questa estensione per Firefox è stata l'unica soluzione che sono riuscito a far funzionare: https://addons.mozilla.org/en-us/firefox/addon/css-reloader/
La risposta accettata sopra è corretta. Se, tuttavia, desideri solo ricaricare la cache periodicamente e stai utilizzando Firefox, gli strumenti per sviluppatori Web (nella voce di menu Strumenti a partire da novembre 2015) forniscono un'opzione di rete. Questo include un pulsante Ricarica. Seleziona Ricarica per un ripristino della cache una volta disattivato.
Se si vuole essere sicuri che questi file siano adeguatamente aggiornati da Chrome per tutti gli utenti, quindi è necessario avere must-revalidatein Cache-Controlintestazione. In questo modo Chrome ricontrollerà i file per vedere se è necessario recuperarli di nuovo.
Consiglia la seguente intestazione di risposta:
Cache-Control: must-validate
Questo dice a Chrome di verificare con il server e vedere se c'è un file più recente. Se è presente un file più recente, lo riceverà nella risposta. In caso contrario, riceverà una risposta 304 e la certezza che quella nella cache è aggiornata.
Se NON imposti questa intestazione, in assenza di qualsiasi altra impostazione che invalidi il file, Chrome non verificherà mai con il server se è disponibile una versione più recente.
Ecco un post sul blog che discute ulteriormente il problema.
Al posto del link-tag in html-head al file css esterno, usa php-include:
<style>
<?php
include("style.css");
?>
</style>
Tipo di hack, ma funziona per me :)
Ho deciso che poiché i browser non controllano le nuove versioni dei file css e js, rinomino le mie directory css e js ogni volta che apporto una modifica. Uso css1 a css9 e js1 a js9 come nomi di directory. Quando arrivo a 9, ricomincio da capo a 1. È un dolore, ma funziona perfettamente ogni volta. È ridicolo dover dire agli utenti di digitare.
Ho un caso in cui ho bisogno di essere in grado di creare e modificare i miei fogli di stile da remoto influenzando migliaia di client, ma a causa del rischio di un carico di rete pesante, non sto disattivando la cache.
Dato che posso modificare i contenuti HTML da remoto, collego quindi il foglio di stile con un codice hash che corrisponda al contenuto del foglio di stile.
https://example.com/contents/stylesheetctrl?id=12345&hash=-1456405808
Detto questo, utilizzo anche una funzione javascript lato client per sostituire con cura i nodi e gli attributi quando il contenuto HTML cambia, il che significa che il tag di collegamento del foglio di stile non verrà sostituito, cambierà solo l'attributo href.
Questo scenario funziona bene in Chrome, Firefox e Edge su Windows, anche Chrome su Android, ma con mia sorpresa non sempre funziona nei client web su Android. Quindi sto più o meno cercando qualcosa per forzare / attivare l'aggiornamento utilizzando javascript, in modo ottimale senza bisogno di ricaricare la pagina.
Puoi utilizzare la barra degli strumenti per sviluppatori di Firefox / Chrome:
Prova questo:
link href="styles/style.css?=time()" rel="stylesheet" type="text/css"
Se hai bisogno di qualcosa dopo il "?" che è diverso ogni volta che si accede alla pagina, lo time()farà. Lasciarlo permanentemente nel codice non è una buona idea poiché rallenterà solo il caricamento della pagina e probabilmente non è necessario.
Ho scoperto che forzare l'aggiornamento di un foglio di stile è utile se hai apportato modifiche estese al layout di una pagina e l'accesso al nuovo foglio di stile è fondamentale per far apparire qualcosa di sensato sullo schermo.