del browser Force per la cache chiaro

StackOverflow https://stackoverflow.com/questions/1922910

Domanda

C'è un modo per mettere un po 'di codice sulla mia pagina in modo che quando un utente visita un sito, si cancella la cache del browser, in modo che possano visualizzare le modifiche?

Lingue utilizzate:. ASP.NET, VB.NET, e, naturalmente, HTML, CSS e jQuery

È stato utile?

Soluzione

Se questo è circa .css e .js cambiamenti, un modo è quello di "busting della cache" è aggiungendo qualcosa come "_versionNo" al nome del file per ogni release. Ad 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.

Oppure, in alternativa farlo 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.

È possibile controllare questo per vedere come potrebbe funzionare .

Altri suggerimenti

Esaminare la Cache-Control e il scade META tag.

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">

Un altro prassi comune è quello di aggiungere stringhe continuo cambiamento alla fine dei file richiesti. Per esempio:

<script type="text/javascript" src="main.js?v=12392823"></script>

Aggiornamento 2012

Questa è una vecchia questione, ma penso che ha bisogno di una più aggiornata risposta perché ora c'è un modo per avere un maggiore controllo del sito web caching.

Offline Web Applications (che è davvero qualsiasi sito web HTML5) applicationCache.swapCache() può essere utilizzato per aggiornare la versione memorizzata nella cache del tuo sito web senza la necessità di manualmente ricaricare la pagina.

Questo è un esempio di codice dalla Guida per principianti a Utilizzo del cache Applicazione su HTML5 Rocks spiegare 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);

utilizzando la cache applicazione su Mozilla Developer Network per ulteriori informazioni.

Aggiornamento 2016

Le cose cambiano rapidamente sul Web. Questa domanda è stato chiesto nel 2009 e nel 2012 ho pubblicato un aggiornamento di un nuovo modo di gestire il problema descritto nella domanda. Altri 4 anni passati e ora sembra che sia già deprecato. Grazie alla cgaldiolo per segnalarlo nei commenti.

Al momento, a partire da luglio 2016, i, Sezione 7.9, applicazioni Web offline HTML standard comprende un avvertimento deprecazione:

  

Questa funzionalità è in procinto di essere rimosso dalla piattaforma Web.   (Questo è un processo lungo che richiede molti anni.) Utilizzando una delle   funzionalità dell'applicazione Web non in linea in questo momento è altamente sconsigliato.   Utilizzare lavoratori dei servizi, invece.

utilizzando la cache applicazione su Mozilla Developer Network che ho fatto riferimento nel 2012:

  

Sconsigliata
Questa caratteristica è stata rimossa dagli standard Web.   Anche se alcuni browser possono ancora sostenerlo, è in procinto di   cadute. Non usare in progetti vecchi o nuovi. Pagine o applicazioni web   usando si può rompere in qualsiasi momento.

Bug 1.204.581 - Aggiungere un avviso di disapprovazione per AppCache se operaio di servizio recuperare l'intercettazione è abilitato .

Non in quanto tale. Un metodo è quello di inviare le intestazioni appropriate quando la distribuzione di contenuti per forzare il browser a ricaricare:

assicurandosi una pagina web non è cache, in tutti i browser.

Se la vostra ricerca di "cache header" o qualcosa di simile qui su SO, troverete ASP.NET esempi specifici.

Un altro modo, meno pulito ma a volte solo se non è possibile controllare le intestazioni sul lato server, è l'aggiunta di un parametro GET casuale per la risorsa che viene chiamato: 

myimage.gif?random=1923849839

risorse statiche caching giusta sarebbe quella di parametri di utilizzo di query con il valore di ogni versione distribuzione o file. Questo avrà effetto di svuotare la cache dopo ogni distribuzione. 

/Content/css/Site.css?version={FileVersionNumber}

Ecco ASP.NET MVC esempio. 

<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 di montaggio.

Ho avuto simile problema e questo è come ho risolto:

  1. Nel file di index.html ho aggiunto manifesti: 

    <html manifest="cache.manifest">

  2. Nella sezione <head> script incluso l'aggiornamento della cache: 

    <script type="text/javascript" src="update_cache.js"></script>
  3. funzione onload

    Nella sezione <body> ho inserito: 

    <body onload="checkForUpdate()">

  4. In cache.manifest ho messo tutti i file che voglio mettere in cache. E 'importante ora che funziona nel mio caso (Apache) semplicemente aggiornando di volta in volta il commento "versione". E 'anche la possibilità di nominare i file con "? Ver = 001" o qualcosa alla fine del nome, ma è non è necessario . Cambiare solo # version 1.01 innesca evento di aggiornamento della cache. 

    CACHE MANIFEST
# version 1.01
style.css
imgs/logo.png
#all other files

    E 'importante includere 1., 2. e 3. punti solo in index.html. Altrimenti 

    GET http://foo.bar/resource.ext net::ERR_FAILED

    si verifica perché ogni file "bambino" cerca di memorizzare nella cache della pagina mentre la pagina è già memorizzata nella cache.

  5. Nel file di update_cache.js Ho messo 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 nel manifesto si deve aggiornare la versione commento. Ora visitare la pagina index.html aggiornerà la cache.

Le parti di soluzione non sono mie, ma li ho trovati attraverso internet e messi insieme in modo che funzioni.

Ho avuto un caso in cui vorrei prendere le foto di clienti on-line e avrebbe bisogno di aggiornare la div se una foto è stata modificata. Browser è stato ancora mostrando la vecchia foto. Così ho usato il trucco di chiamare una variabile GET casuale, che sarebbe unico ogni volta. Qui è se potrebbe aiutare chiunque 

<img src="/photos/userid_73.jpg?random=<?php echo rand() ?>" ...

EDIT Come sottolineato da altri, che segue è molto più efficiente soluzione dal momento che ricaricherà le immagini solo quando vengono modificate, identificando questo cambiamento la dimensione del file: 

<img src="/photos/userid_73.jpg?modified=<? filemtime("/photos/userid_73.jpg")?>"

Un sacco di risposte manca il punto - la maggior parte degli sviluppatori sono ben consapevoli del fatto che a disabilitare la cache è inefficiente. Tuttavia, ci sono molte circostanze comuni dove l'efficienza è importante e il comportamento della cache di default è male rotto.

Questi includono annidato, il test iterativo copione (quello grande!) E rotti soluzioni software di terze parti. Nessuna delle soluzioni qui riportati sono sufficienti per affrontare tali scenari comuni. La maggior parte dei browser web sono caching troppo aggressivo e non forniscono i mezzi ragionevoli per evitare questi problemi.

Non sono sicuro se questo potrebbe davvero aiutare, ma è così che la cache dovrebbe funzionare su qualsiasi browser. Quando la richiesta del browser un file, esso deve sempre inviare una richiesta al server a meno che non ci sia una modalità "offline". Il server leggerà alcuni parametri come data di modifica o etags.

Il server restituirà una risposta 304 errori per non modificati e il browser dovrà utilizzare la cache. Se l'ETAG non convalida sul lato server o la data di modifica è inferiore alla data di modifica corrente, il server dovrebbe restituire i nuovi contenuti con la nuova data o etags modificato o entrambi.

Se non ci sono dati caching inviati al browser, credo che il comportamento non è definita, il browser può o non può memorizzare nella cache di file che non raccontano il modo in cui vengono memorizzati nella cache. Se si imposta parametri di cache nella risposta sarà memorizzare nella cache i file in modo corretto e quindi il server può scegliere di restituire un errore 304, o il nuovo contenuto.

Questo è come dovrebbe essere fatto. Utilizzando numeri casuali params o una versione in URL è più simile a un hack di ogni altra cosa.

http://www.checkupdown.com/status/E304.html http://en.wikipedia.org/wiki/HTTP_ETag http: //www.xpertdeveloper. com / 2011/03 / dell'ultima modifica-header-vs-scadenza-header-vs-etag /

Dopo la lettura ho visto che c'è anche una data di scadenza. Se avete problema, potrebbe essere che hai una data di scadenza impostato. In altre parole, quando il browser memorizza nella cache il file, dal momento che ha una data di scadenza, non dovrebbe essere necessario richiedere nuovamente prima di tale data. In altre parole, non potrà mai chiedere al file sul server e non riceverà mai un 304 non modificati. Sarà sufficiente utilizzare la cache fino al raggiungimento della data di scadenza o la cache viene cancellata.

In modo che sia la mia ipotesi, si dispone di una sorta di data di scadenza e si dovrebbe usare etags di ultima modifica o un mix di tutto e assicurarsi che non v'è data di scadenza.

Se la gente tende ad aggiornare un sacco e il file non venga cambiato molto, quindi potrebbe essere saggio per impostare una grande data di scadenza.

I miei 2 centesimi!

Aggiornamento l'URL per le seguenti opere per me:

/custom.js?id=1

Con l'aggiunta di un numero unico, dopo ?id= e l'incremento per nuovi cambiamenti, gli utenti non devono premere CTRL + F5 per aggiornare la cache. In alternativa, è possibile aggiungere la versione hash o una stringa del tempo corrente o epoca dopo ?id=

Qualcosa di simile ?id=1520606295

Qui è la pagina MDSN su come impostare la 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 If

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 po 'di file che si trova in cui l'HTML sono:

"versio.txt": 

v00.5.0014

Questa funzione è chiamata in tutte le mie pagine, in modo che quando si carica controlla se il valore della versione del localStorage è inferiore alla versione corrente e fa un 

location.reload(true);

... per forzare ricaricamento dal server anziché dalla cache.

(ovviamente, invece di localStorage è possibile utilizzare i cookie o altro supporto di memorizzazione client persistente)

ho optato per questa soluzione per la sua semplicità, perché solo mantenendo un unico file "versio.txt" costringerà il sito completo per ricaricare.

Il metodo queryString è difficile da implementare ed è anche memorizzato nella cache (se si passa da v1.1 a una versione precedente verrà caricato dalla cache, allora significa che la cache non viene svuotata, mantenendo tutte le versioni precedenti alla cache).

Sono un po 'newbie e mi piacerebbe apreciate il vostro controllo professionale e rivedere per assicurare il mio metodo è un buon approccio.

Speranza che aiuta.

Oltre a impostare Cache-Control: no-cache, si dovrebbe anche impostare l'intestazione di scadenza a -1 se si desidera la copia locale ad essere aggiornati di volta in volta (alcune versioni di IE sembrano richiedere questo)

HTTP Cache - verificare con il server, inviando sempre If-Modified-Since

C'è un trucco che può essere used.The trucco è quello di aggiungere un parametro / stringa al nome del file nella tag script e cambiarlo quando si file modifiche.

<script src="myfile.js?version=1.0.0"></script>

Il browser interpreta l'intera stringa come il percorso del file, anche se quello che viene dopo il "?" sono parametri. Così wat succede ora è che la prossima volta, quando si aggiorna il file basta cambiare il numero nel tag script sul tuo sito web (Esempio <script src="myfile.js?version=1.0.1"></script>) e ogni browser gli utenti vedranno il file è stato modificato e prendere una nuova copia.

browser di forza per cancellare la cache o ricaricare i dati corretti? Ho provato la maggior parte delle soluzioni descritte in StackOverflow, un certo lavoro, ma dopo un po 'di tempo, lo fa la cache alla fine e visualizzare lo script caricato precedente o file. C'è un altro modo che avrebbe cancellare la cache (css, js, ecc) e in realtà funziona su tutti i browser?

Ho trovato finora che le risorse specifiche possono essere ricaricate singolarmente se si modifica la data e l'ora dei file sul server. "Cache Clearing" non è così facile come dovrebbe essere. Invece di svuotare la cache sul mio browser, mi sono reso conto che "toccare" i file del server cache effettivamente modificare la data e l'ora del file di origine nella cache sul server (testato su bordo, Chrome e Firefox) e la maggior parte dei browser automaticamente scarica il più corrente nuova copia di che cosa è sul vostro server (codice, grafica eventuali multimediali troppo). Vi suggerisco solo di copiare gli script più attuali sul server e "fare la cosa touch" soluzione prima che il programma viene eseguito, in modo cambierà la data di tutti i file problema ad una data e ora più recente , poi scarica una copia fresca per il browser: 

<?php
   touch('/www/sample/file1.css');
   touch('/www/sample/file2.js');
?>

poi ... il resto del programma ...

Mi c'è voluto del tempo per risolvere il problema (come molti browser si comportano in modo diverso a diversi comandi, ma tutti i tempi di controllo di file e confrontare la vostra copia scaricata nel tuo browser, se la data e l'ora diversa, farà il refresh) , se non si può andare nel modo giusto presunta, c'è sempre un'altra soluzione utilizzabile e meglio è. Cordiali saluti e campeggio felice. Tra l'altro touch (); o alternative lavorano in molti linguaggi di programmazione incluso in javascript bash sh php ed è possibile includere o chiamare in HTML.

Vuoi cancellare la cache, o semplicemente assicurarsi che la pagina corrente (cambio?) Non è memorizzato nella cache?

Nel secondo caso, dovrebbe essere semplice come 

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top