C'è un modo in cui posso inserire del codice sulla mia pagina in modo che quando qualcuno visita un sito, cancella la cache del browser, in modo che possano visualizzare le modifiche?
Lingue utilizzate: ASP.NET, VB.NET e ovviamente HTML, CSS e jQuery.
Risposte:
Se si tratta di .csse .jscambia, un modo è quello di "busting della cache" è aggiungendo qualcosa come " _versionNo" al nome del file per ogni versione. Per esempio:
script_1.0.css // This is the URL for release 1.0
script_1.1.css // This is the URL for release 1.1
script_1.2.css // etc.O in alternativa fallo dopo il nome del file:
script.css?v=1.0 // This is the URL for release 1.0
script.css?v=1.1 // This is the URL for release 1.1
script.css?v=1.2 // etc.Puoi controllare questo link per vedere come potrebbe funzionare.
script.js?v=1.2. (O se non stai tenendo traccia delle versioni, usa semplicemente il file dell'ultima modifica, che è ancora più facile da fare). Non sono sicuro se questo è ciò che intendeva il commentatore precedente!
<link />dinamico dei tag e iniettare la versione dell'applicazione come parametro della stringa di query. In alternativa, alcuni CMS avranno una "versione di risorse client" come impostazione a livello di CMS che viene aggiunta - l'amministratore del sito può aumentare manualmente quella versione nr e gli aggiornamenti del CMS potrebbero anche aggiornarlo automaticamente. In conclusione: è necessario eseguire il rendering dinamico degli URL dei file.
Esamina il controllo della cache e il tag META scade .
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
Un'altra pratica comune è quella di aggiungere stringhe in continua evoluzione alla fine dei file richiesti. Per esempio:
<script type="text/javascript" src="main.js?v=12392823"></script>
Questa è una vecchia domanda, ma penso che abbia bisogno di una risposta più aggiornata perché ora c'è un modo per avere un maggiore controllo della cache del sito Web.
Nelle applicazioni Web offline (che in realtà è qualsiasi sito Web HTML5) è applicationCache.swapCache()possibile utilizzare per aggiornare la versione memorizzata nella cache del sito Web senza la necessità di ricaricare manualmente la pagina.
Questo è un esempio di codice della Guida per principianti all'uso della cache dell'applicazione su HTML5 Rocks che spiega come aggiornare gli utenti alla versione più recente del tuo sito:
// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);Vedi anche Utilizzo della cache dell'applicazione su Mozilla Developer Network per maggiori informazioni.
Le cose cambiano rapidamente sul Web. Questa domanda è stata posta nel 2009 e nel 2012 ho pubblicato un aggiornamento su un nuovo modo di gestire il problema descritto nella domanda. Passarono altri 4 anni e ora sembra che sia già deprecato. Grazie a cgaldiolo per averlo sottolineato nei commenti.
Attualmente, a partire da luglio 2016, lo standard HTML, sezione 7.9, Applicazioni Web offline include un avviso di deprecazione:
Questa funzione è in procinto di essere rimossa dalla piattaforma Web. (Questo è un lungo processo che richiede molti anni.) L'uso di una qualsiasi delle funzionalità dell'applicazione Web offline in questo momento è altamente scoraggiato. Utilizzare invece gli addetti all'assistenza.
Così fa Utilizzando la cache dell'applicazione su Mozilla Developer Network che ho fatto riferimento nel 2012:
Obsoleto
Questa funzione è stata rimossa dagli standard Web. Sebbene alcuni browser possano ancora supportarlo, è in procinto di essere eliminato. Non utilizzarlo in progetti vecchi o nuovi. Le pagine o le app Web che la utilizzano possono interrompersi in qualsiasi momento.
Non come tale. Un metodo consiste nell'inviare le intestazioni appropriate durante la consegna del contenuto per forzare il browser a ricaricare:
Assicurarsi che una pagina Web non sia memorizzata nella cache, su tutti i browser.
Se la tua ricerca "cache header"o qualcosa di simile qui su SO, troverai esempi specifici di ASP.NET.
Un altro modo meno pulito ma a volte solo se non puoi controllare le intestazioni sul lato server è aggiungere un parametro GET casuale alla risorsa che viene chiamata:
myimage.gif?random=1923849839Per le risorse statiche, la corretta memorizzazione nella cache consisterebbe nell'utilizzare i parametri della query con il valore di ogni distribuzione o versione del file. Ciò avrà effetto di svuotare la cache dopo ogni distribuzione.
/Content/css/Site.css?version={FileVersionNumber}Ecco un esempio di ASP.NET MVC.
<link href="@Url.Content("~/Content/Css/Reset.css")?version=@this.GetType().Assembly.GetName().Version" rel="stylesheet" type="text/css" />Non dimenticare di aggiornare la versione dell'assembly.
?version=@ViewContext.Controller.GetType().Assembly.GetName().Version
Ho avuto un problema simile ed è così che l'ho risolto:
Nel index.htmlfile ho aggiunto manifest:
<html manifest="cache.manifest">Nella <head>sezione incluso lo script che aggiorna la cache:
<script type="text/javascript" src="update_cache.js"></script>Nella <body>sezione ho inserito la funzione onload:
<body onload="checkForUpdate()">In cache.manifestho inserito tutti i file che voglio memorizzare nella cache. È importante ora che funzioni nel mio caso (Apache) semplicemente aggiornando ogni volta il commento "versione". È anche un'opzione per nominare i file con "? Ver = 001" o qualcosa alla fine del nome ma non è necessario . La modifica # version 1.01attiva solo l' evento di aggiornamento della cache.
CACHE MANIFEST
# version 1.01
style.css
imgs/logo.png
#all other filesÈ importante includere punti 1., 2. e 3. solo in index.html. Altrimenti
GET http://foo.bar/resource.ext net::ERR_FAILEDsi verifica perché ogni file "figlio" tenta di memorizzare nella cache la pagina mentre la pagina è già memorizzata nella cache.
Nel update_cache.jsfile ho inserito questo codice:
function checkForUpdate()
{
if (window.applicationCache != undefined && window.applicationCache != null)
{
window.applicationCache.addEventListener('updateready', updateApplication);
}
}
function updateApplication(event)
{
if (window.applicationCache.status != 4) return;
window.applicationCache.removeEventListener('updateready', updateApplication);
window.applicationCache.swapCache();
window.location.reload();
}Ora basta modificare i file e in manifest è necessario aggiornare il commento della versione. Ora visitando la pagina index.html si aggiorna la cache.
Le parti della soluzione non sono mie ma le ho trovate tramite Internet e messe insieme in modo che funzionino.
Ho avuto un caso in cui avrei scattato foto di clienti online e avrei dovuto aggiornare il div se una foto fosse cambiata. Il browser mostrava ancora la vecchia foto. Quindi ho usato l'hacking di chiamare una variabile GET casuale, che sarebbe unica ogni volta. Qui è se potesse aiutare qualcuno
<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...MODIFICA Come sottolineato da altri, seguire è una soluzione molto più efficiente poiché ricaricherà le immagini solo quando vengono modificate, identificando questa modifica in base alla dimensione del file:
<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"Molte risposte mancano il punto: la maggior parte degli sviluppatori è consapevole che disattivare la cache è inefficiente. Tuttavia, ci sono molte circostanze comuni in cui l'efficienza non è importante e il comportamento predefinito della cache è gravemente rotto.
Questi includono test di script nidificati e iterativi (il più grande!) E soluzioni temporanee al software di terze parti. Nessuna delle soluzioni fornite qui è adeguata per affrontare tali scenari comuni. La maggior parte dei browser Web è una cache troppo aggressiva e non fornisce alcun mezzo ragionevole per evitare questi problemi.
<meta http-equiv="pragma" content="no-cache" />Vedi anche /programming/126772/how-to-force-a-web-browser-not-to-cache-images
L'aggiornamento dell'URL per quanto segue funziona per me:
/custom.js?id=1
Aggiungendo un numero univoco dopo ?id=e incrementandolo per le nuove modifiche, gli utenti non devono premere CTRL + F5per aggiornare la cache. In alternativa, puoi aggiungere l'hash o la versione stringa dell'ora corrente o Epoch after?id=
Qualcosa di simile a ?id=1520606295
Ecco la pagina MDSN sull'impostazione della memorizzazione nella cache in ASP.NET.
Response.Cache.SetExpires(DateTime.Now.AddSeconds(60))
Response.Cache.SetCacheability(HttpCacheability.Public)
Response.Cache.SetValidUntilExpires(False)
Response.Cache.VaryByParams("Category") = True
If Response.Cache.VaryByParams("Category") Then
'...
End IfNon sono sicuro che ciò possa davvero aiutarti, ma è così che la cache dovrebbe funzionare su qualsiasi browser. Quando il browser richiede un file, deve sempre inviare una richiesta al server a meno che non sia presente una modalità "offline". Il server leggerà alcuni parametri come data modificata o etags.
Il server restituirà una risposta di errore 304 per NOT MODIFIED e il browser dovrà utilizzare la sua cache. Se etag non convalida sul lato server o la data modificata è inferiore alla data modificata corrente, il server deve restituire il nuovo contenuto con la nuova data modificata o etags o entrambi.
Se non ci sono dati di memorizzazione nella cache inviati al browser, suppongo che il comportamento sia indeterminato, il browser potrebbe o meno memorizzare nella cache file che non dicono come vengono memorizzati nella cache. Se si impostano i parametri di memorizzazione nella cache nella risposta, memorizzerà correttamente i file nella cache e il server potrebbe scegliere di restituire un errore 304 o il nuovo contenuto.
Così è come dovrebbe essere fatto. L'uso di parametri casuali o il numero di versione negli URL è più simile a un hack di qualsiasi altra cosa.
http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http://www.xpertdeveloper.com/2011/03/last-modified-header-vs- scade-header-vs-ETAG /
Dopo aver letto ho visto che c'è anche una data di scadenza. In caso di problemi, è possibile che sia stata impostata una data di scadenza. In altre parole, quando il browser memorizzerà il file nella cache, poiché ha una data di scadenza, non dovrebbe richiederlo di nuovo prima di tale data. In altre parole, non chiederà mai il file al server e non riceverà mai un 304 non modificato. Utilizzerà semplicemente la cache fino al raggiungimento della data di scadenza o alla cancellazione della cache.
Quindi questa è la mia ipotesi, hai una sorta di data di scadenza e dovresti usare gli etag modificati per ultimi o un mix di tutto e assicurarti che non ci sia una data di scadenza.
Se le persone tendono ad aggiornarsi molto e il file non viene cambiato molto, allora potrebbe essere saggio impostare una grande data di scadenza.
I miei 2 centesimi!
Ho implementato questa semplice soluzione che funziona per me (non ancora in ambiente di produzione):
function verificarNovaVersio() {
var sVersio = localStorage['gcf_versio'+ location.pathname] || 'v00.0.0000';
$.ajax({
url: "./versio.txt"
, dataType: 'text'
, cache: false
, contentType: false
, processData: false
, type: 'post'
}).done(function(sVersioFitxer) {
console.log('Versió App: '+ sVersioFitxer +', Versió Caché: '+ sVersio);
if (sVersio < (sVersioFitxer || 'v00.0.0000')) {
localStorage['gcf_versio'+ location.pathname] = sVersioFitxer;
location.reload(true);
}
});
}Ho un piccolo file situato dove sono gli html:
"Versio.txt":
v00.5.0014Questa funzione è chiamata in tutte le mie pagine, quindi durante il caricamento controlla se il valore della versione di localStorage è inferiore alla versione corrente e fa un
location.reload(true);... per forzare la ricarica dal server anziché dalla cache.
(ovviamente, invece di localStorage è possibile utilizzare i cookie o altra memoria client persistente)
Ho optato per questa soluzione per la sua semplicità, perché solo il mantenimento di un singolo file "versio.txt" costringe a ricaricare l'intero sito.
Il metodo queryString è difficile da implementare ed è anche memorizzato nella cache (se si cambia da v1.1 a una versione precedente verrà caricato dalla cache, significa che la cache non viene svuotata, mantenendo tutte le versioni precedenti nella cache).
Sono un po 'alle prime armi e apprezzerei il tuo controllo professionale e la recensione per assicurarmi che il mio metodo sia un buon approccio.
Spero che sia d'aiuto.
Oltre a impostare Cache-control: no-cache, dovresti anche impostare l'intestazione Expires su -1 se desideri che la copia locale venga aggiornata ogni volta (alcune versioni di IE sembrano richiederlo).
Vedi cache HTTP - verifica con il server, inviando sempre If-Modified-Since
È possibile utilizzare un trucco che consiste nell'aggiungere un parametro / stringa al nome del file nel tag dello script e modificarlo quando si modificano i file.
<script src="myfile.js?version=1.0.0"></script>
Il browser interpreta l'intera stringa come percorso del file anche se ciò che viene dopo il "?" sono parametri. Quindi adesso succede che la prossima volta che aggiorni il tuo file basta cambiare il numero nel tag dello script sul tuo sito web (Esempio <script src="myfile.js?version=1.0.1"></script>) e ogni browser degli utenti vedrà il file è cambiato e prendere una nuova copia.
Forzare i browser a svuotare la cache o ricaricare i dati corretti? Ho provato la maggior parte delle soluzioni descritte in StackOverflow, alcune funzioni, ma dopo un po ', alla fine memorizza nella cache e visualizza il precedente script o file caricato. Esiste un altro modo per svuotare la cache (css, js, ecc.) E funzionare effettivamente su tutti i browser?
Ho scoperto che è possibile ricaricare singolarmente risorse specifiche se si modificano la data e l'ora sui file sul server. "Svuotare la cache" non è così facile come dovrebbe essere. Invece di svuotare la cache sui miei browser, mi sono reso conto che "toccando" i file del server memorizzati nella cache cambierà effettivamente la data e l'ora del file sorgente memorizzato nella cache sul server (testato su Edge, Chrome e Firefox) e la maggior parte dei browser scaricherà automaticamente la maggior parte attuale copia aggiornata di ciò che è presente sul tuo server (codice, grafica anche qualsiasi file multimediale). Ti suggerisco di copiare gli script più recenti sul server e la soluzione "fai la cosa del tocco" prima dell'esecuzione del programma, quindi cambierà la data di tutti i tuoi file problematici in una data e ora più attuali, quindi scaricherà una nuova copia al tuo browser:
<?php
touch('/www/sample/file1.css');
touch('/www/sample/file2.js');
?>quindi ... il resto del programma ...
Mi ci è voluto del tempo per risolvere questo problema (poiché molti browser agiscono in modo diverso a comandi diversi, ma controllano tutti l'ora dei file e si confrontano con la copia scaricata nel browser, se data e ora diverse eseguiranno l'aggiornamento), Se si non posso andare nel modo giusto supposto, c'è sempre un'altra soluzione utilizzabile e migliore. I migliori saluti e buon campeggio. A proposito, toccare (); o le alternative funzionano in molti linguaggi di programmazione inclusi in javascript bash sh php e puoi includerli o chiamarli in html.
Vuoi cancellare la cache o semplicemente assicurarti che la tua pagina (modificata?) Non sia memorizzata nella cache?
Se quest'ultimo, dovrebbe essere semplice come
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">