Come posso forzare i client per aggiornare i file JavaScript?

Question

Attualmente stiamo lavorando in una fase di beta privata e quindi sono ancora nel processo di creazione abbastanza rapidi cambiamenti, anche se, ovviamente, in quanto l'utilizzo è a partire per la rampa di salita, ci sarà rallentare questo processo.Detto questo, un problema che stiamo correndo è che dopo facciamo uscire un aggiornamento con nuovi file JavaScript il browser client utilizzano ancora la versione memorizzata nella cache del file e non vedere l'aggiornamento.Ovviamente, una richiesta di supporto, si può semplicemente informare loro di fare un ctrlF5 aggiornamento per assicurarsi che essi ottenere up-to-data file dal server, ma sarebbe preferibile gestire questo prima di quel momento.

Il nostro pensiero attuale è sufficiente allegare un numero di versione sul nome del file JavaScript e poi quando vengono apportate modifiche, incrementare il numero di versione sulla sceneggiatura e aggiornare tutti i riferimenti.Questo sicuramente ottiene il lavoro fatto, ma aggiornando i riferimenti su ogni versione può ottenere ingombrante.

Come sono sicuro che non siamo i primi a trattare con questo, ho pensato che sarebbe buttare fuori per la comunità.Come stai assicurando al cliente di aggiornare la cache quando si aggiorna il codice?Se si utilizza il metodo sopra descritto, è stato utilizzato un processo che facilita il cambiamento?

Answer 1

Per quanto ne so io una soluzione comune è quello di aggiungere un ?<version> per lo script src link.

Per esempio:

<script type="text/javascript" src="myfile.js?1500"></script>

---

Presumo a questo punto che non c'è un modo migliore rispetto a trova-sostituisci per incremento di questi "numeri di versione" in tutti i tag di script?

Si potrebbe avere un sistema di controllo di versione di farlo?Maggior parte dei sistemi di controllo di versione è un modo per inserire automaticamente il numero di revisione del check-in, per esempio.

Sarebbe guardare qualcosa come questo:

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

---

Naturalmente, ci sono sempre le soluzioni migliori, come questo.

Answer 2

Aggiungendo l'orario corrente, l'URL è infatti una soluzione comune.Tuttavia, è anche possibile gestire questo a livello di server web, se si desidera.Il server può essere configurato per l'invio di diverse intestazioni HTTP per i file javascript.

Per esempio, per forzare il file nella cache per non più di 1 giorno, è necessario inviare:

Cache-Control: max-age=86400, must-revalidate

Per la beta, se si desidera forzare l'utente a ottenere sempre l'ultima, utilizzare:

Cache-Control: no-cache, must-revalidate

Answer 3

Pagina Di Google Velocità:Non inserire una stringa di query nell'URL per le risorse statiche.La maggior parte dei proxy, più in particolare, Calamari attraverso versione 3.0, non le risorse di cache con un "?" nel loro URL, anche se un Cache-control:pubblico intestazione è presente nella risposta.Per attivare la memorizzazione nella cache del proxy per queste risorse, rimuovere le stringhe di query da riferimenti a risorse statiche, e invece di codificare i parametri nel file stessi nomi.

In questo caso, è possibile includere la versione in URL ex: http://abc.com/v1.2/script.js e utilizzare il mod_rewrite di apache per reindirizzare il link http://abc.com/script.js.Quando si modifica la versione client, il browser si aggiorna il nuovo file.

Answer 4

Questo uso è stato deprected: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Questa risposta è solo 6 anni di ritardo, ma non vedo questa risposta in molti luoghi...HTML5 ha introdotto La Cache Dell'Applicazione che viene utilizzato per risolvere questo problema.Stavo trovando che il nuovo codice del server, ho scritto che andava in crash vecchio javascript memorizzati nel browser, quindi volevo trovare un modo per scadere javascript.Utilizzare un file manifest che assomiglia a questo:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

e generare il file con un nuovo punto ogni volta che si desidera che gli utenti di aggiornare i loro cache.Come nota a margine, se si aggiunge a questo, il browser non ricaricare (anche quando un utente aggiorna la pagina) fino a che il manifesto dice di.

Answer 5

Che ne dici di aggiungere la dimensione del file come un carico parametro?

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

Così ogni volta che si aggiorna il file di "filever" modifiche dei parametri.

Come quando si aggiorna il file e l'aggiornamento dei risultati in un file delle stesse dimensioni?quali sono le probabilità?

Answer 6

Non tutti i browser file di cache con '?' in esso.Quello che ho fatto per assicurarsi che è stato memorizzato nella cache per quanto possibile, ho inserito la versione di nel nome del file.

Così, invece di stuff.js?123, Ho fatto stuff_123.js

Ho usato mod_redirect(Penso) in apache per have stuff_*.js per andare stuff.js

Answer 7

Per ASP.NET pagine sto usando il seguente

PRIMA

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

DOPO (forza ricaricare)

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

L'aggiunta di data / ora.Ora.Le zecche funziona molto bene.

Answer 8

Per ASP.NET suppongo che la soluzione successiva con opzioni avanzate (debug/modalità di rilascio delle versioni):

Js o Css file inclusi tale per mezzo di:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Globale.JsPostfix e Globale.CssPostfix è calcolato dalla seguente modo Globale.asax:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

Answer 9

Se si sta generando la pagina con i link per i file JS soluzione più semplice è aggiungere il file ultima modifica di data e ora per i link generati.

Questo è molto simile a Huppie la risposta, ma funziona in sistemi di controllo di versione, senza la sostituzione di parole chiave.E ' anche meglio di aggiungere l'ora corrente, dal momento che vorresti impedire la memorizzazione nella cache anche quando il file non è affatto cambiata.

Answer 10

Abbiamo creato un SaaS per gli utenti e di fornire loro uno script per collegare nella loro pagina web, e non è stato possibile allegare una versione con lo script come utente di allegare lo script per il loro sito web per funzionalità e io non posso costringerli a cambiare versione ogni volta che si aggiorna lo script

Così, abbiamo trovato un modo per caricare la nuova versione dello script ogni volta che l'utente chiama lo script originale

il link lo script fornito all'utente

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

il file di script

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

Spiegazione:

L'utente ha allegato lo script fornito nel loro sito web e abbiamo verificato per il token univoco collegato con lo script esiste o non utilizzando il selettore di jQuery e se poi non caricare in modo dinamico con i nuovi token (o versione)

Questa è chiamata la stessa script due volte, il che potrebbe essere un problema di prestazioni, ma in realtà si risolve il problema di costringere lo script per non caricare la cache senza mettere la versione in script di collegamento per l'utente (o cliente

Disclaimer:Non utilizzare se la performance è un grande problema nel tuo caso.

Answer 11

La funzione jQuery getScript può essere utilizzato anche per garantire che un file js è infatti caricato ogni volta che la pagina viene caricata.

Questo è come ho fatto:

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

Controllare la funzione di http://api.jquery.com/jQuery.getScript/

Per impostazione predefinita, $.getScript() imposta l'impostazione della cache su false.Questo aggiunge un segnaposto parametro di query per la richiesta di URL per verificare che il browser scarica lo script ogni volta che è richiesto.

Answer 12

Una soluzione è quella di aggiungere una stringa di query con un timestamp per l'URL quando recupero di risorse.Questo sfrutta il fatto che un browser memorizza nella cache le risorse recuperate dall'Url con stringhe di query in loro.

Probabilmente non si desidera che il browser non memorizza nella cache le risorse a tutti però;è più probabile che si desidera loro di cache, ma si desidera che il browser di scaricare una nuova versione del file quando viene reso disponibile.

La soluzione più comune sembra essere quello di incorporare un timestamp o numero di revisione nel nome del file stesso.Questo è un po ' più di lavoro, perché il tuo codice deve essere modificato per richiedere i file corretti, ma significa che, ad esempio,la versione 7 del snazzy_javascript_file.js (cioè snazzy_javascript_file_7.js) viene memorizzato nella cache del browser, fino al rilascio della versione 8, e quindi le modifiche del codice per recuperare snazzy_javascript_file_8.js invece.

Answer 13

Utilizzare una versione GET variabile per impedire la memorizzazione nella cache del browser.

Si allegano ?v=AUTO_INCREMENT_VERSION alla fine dell'url impedisce la memorizzazione nella cache del browser, evitando così qualsiasi e tutti gli script memorizzato nella cache.

Answer 14

Il mio collega ha appena trovato un riferimento al metodo di destra dopo che ho postato (in riferimento al css) a http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/.Bello vedere che gli altri stanno usando e sembra funzionare.Presumo a questo punto che non c'è un modo migliore rispetto a trova-sostituisci per incremento di questi "numeri di versione" in tutti i tag di script?

Answer 15

Quantunque è quadro specifico, Django 1.4 è questo functionailty che funziona in modo simile al collegamento con l' 'greenfelt' sito in al di sopra di risposta

Answer 16

In PHP:

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

In HTML:

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

Come funziona:

In HTML, scrivere la filepath e il nome, come si wold fare, ma in funzione solo.PHP ottiene il filetime del file e restituisce il filepath+name+"?"+time dell'ultima modifica

Answer 17

Busting della Cache in ASP.NET Core tramite un tag helper di gestire questo per voi e per consentire al browser di tenere in cache scripts/css fino a quando il file viene modificato.Basta aggiungere il tag helper asp-aggiunge-version="true" al tuo script (js) o di collegamento (css) tag:

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

Dave Paquette è un buon esempio e spiegazione di cache busting qui (in fondo alla pagina) Busting Della Cache

Answer 18

La pratica comune oggi è quello di generare un contenuto di codice hash come parte del nome del file per forzare il browser soprattutto IE per ricaricare i file javascript o css file.

Per esempio,

il fornitore.a7561fb0e9a071baadb9.js
principale.b746e3eb72875af2caa9.js

In genere è il lavoro per costruire strumenti come webpack.Qui è più dettagli se qualcuno vuole provare se si utilizza webpack.

Answer 19

Soluzione più semplice?Non lasciate che la cache del browser a tutti.Aggiungere il corrente periodo di tempo (in ms) come una query.

(Si è ancora in beta, quindi si potrebbe fare un ragionevole caso per, non per l'ottimizzazione del rendimento.Ma YMMV qui.)

Answer 20

Il vantaggio dell'utilizzo di un file.js?V=1 nel corso di un fileV1.js è che non hai bisogno di memorizzare più versioni di un file JavaScript sul server.

I guai che vedere con file.js?V=1 è che si può avere a carico di codice in un altro file JavaScript che si rompe quando si utilizza la nuova versione della libreria di utilità.

Per ragioni di compatibilità, penso che sia molto meglio usare jQuery.1.3.js per le nuove pagine e lasciare che le pagine esistenti in uso jQuery.1.1.js, fino a quando si è pronti per aggiornare le vecchie pagine, se necessario.

Answer 21

Un modo semplice.Edit htaccess

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

Answer 22

In asp.net mvc è possibile utilizzare @DateTime.UtcNow.ToString() per js numero di versione del file.Numero di versione cambiamento automatico con data e forzare i client browser per aggiornare automaticamente il file js.Io uso questo metodo e questo è un lavoro ben.

<script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"></script>

Answer 23

Di seguito ha lavorato per me:

<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
</head>