Gestione della cache del browser in app a pagina singola

Question

Gestione della cache del browser in app a pagina singola

#1 da (13 voti)
#2 da (5 voti)
#3 da (1 voti)

25

Sto cercando di capire come gestire correttamente la cache del browser web per le app a singola pagina.

Ho un design abbastanza tipico: diversi file HTML, JS e CSS che implementano la SPA e una serie di dati JSON consumati dalla SPA. I problemi sorgono quando voglio inviare un aggiornamento: aggiorno la parte statica del sito e il codice che genera il JSON contemporaneamente, ma i browser client spesso hanno la porzione statica nella cache, quindi il vecchio codice prova ad elaborare i nuovi dati e può (a seconda delle modifiche apportate) incorrere in problemi. (In particolare, IE sembra più aggressivo di Chrome o Firefox sull'utilizzo del JS memorizzato nella cache senza riconvalida.)

Qual è il modo migliore per gestirlo?

Assicurati che le mie modifiche JSON siano compatibili con le versioni precedenti e che le cache del browser scadano in un lasso di tempo ragionevole.
Incorpora una sorta di numero di versione sia nel JS statico che nel JSON, quindi esegui window.location.reload(true); se non corrispondono.
Scopri la combinazione appropriata di intestazioni ( must-revalidate o no-cache o qualsiasi altra; fonti vary su come eseguire questa operazione) per garantire che i browser ripristinino sempre tutte le risorse su ogni carico, anche se ciò comporta alcuni viaggi di andata e ritorno aggiuntivi da caricare il sito.
Gestisci in modo micro il controllo della cache e scade le intestazioni in modo che il contenuto statico scada quando voglio inviare un aggiornamento.
Qualcos'altro?

javascript web-applications caching

posta Josh Kelley 16.09.2014 - 04:55

fonte

3 risposte

5

Puoi utilizzare if-modified-since + last-modified o if-none-match + etag intestazioni insieme all'intestazione cache-control corretta. (Ci possono essere bug del browser , ma nulla che non puoi gestire nei browser recenti.)

Se i file sono statici, ti suggerisco di utilizzare if-modified-since , perché può essere eseguito automaticamente con un server HTTP ben configurato. Dovrebbe restituire 304 se il file non è stato modificato dall'ultimo download.

Non penso che il tuo # 1 e il # 2 funzioneranno a lungo termine. Il 3 o il 4 possono funzionare. Il n. 3 è più semplice, ma devi imparare come affrontare questo problema una sola volta. Quindi proverei il n. 4 se fossi in te, ma la soluzione potrebbe dipendere da quali browser usano i tuoi clienti ... Ad esempio, IE8 ha problemi con l'aggiornamento della cache ajax, ecc ...

risposta data 18.09.2014 - 23:09

fonte

1

Se puoi includere Java Servlet Filter nella tua SPA, ecco una soluzione funzionante: CorrectBrowserCacheHandlerFilter.java

In sostanza, quando il browser richiede i file statici, il server reindirizzerà tutte le richieste allo stesso ma con un parametro di query hash ( ?v=azErT per esempio) che dipende dal contenuto del file statico di destinazione.

In questo modo, il browser non memorizzerà mai nella cache i file statici dichiarati nella tua index.html ad esempio (poiché riceverà sempre un 302 Moved Temporarily ), ma memorizzerà solo quelli con la versione hash (il server risponderà 200 per loro). Quindi la cache del browser verrà utilizzata in modo efficiente per quei file statici con versione hash.

Dichiarazione di non responsabilità: sono l'autore di CorrectBrowserCacheHandlerFilter.java .

risposta data 13.12.2016 - 16:53

fonte

Leggi altre domande sui tag javascript web-applications caching

L'AWL dovrebbe essere evitato in applicazioni di grandi dimensioni? Il futuro di Qt alla luce della partnership Nokia-Microsoft [chiuso]

score 13 · Accepted Answer

Hai bisogno di una soluzione cache busting . Il ruolo del busting della cache è:

Rinomina le risorse con un nome univoco a seconda del loro contenuto.
Aggiorna tutti i riferimenti a tali risorse.

In un progetto basato su Grunt è comune usare grunt-rev per garantire che tutti i file che devono essere aggiornati vengono assegnati nomi univoci, in base al loro contenuto.

Se ti assicuri che i tuoi file JSON ricevano i nomi di file di cachebusting insieme ai riferimenti ad essi nel tuo Javascript, i client caricheranno sempre i file JSON che il Javascript si aspetta.

Il vantaggio della denominazione dei file basata su hash è che i file che non sono stati modificati avranno gli stessi nomi di file dopo il busting della cache, quindi i browser possono continuare a utilizzare in modo sicuro il contenuto della cache quando non è cambiato.

Ovviamente questo è il tipo di cosa che desideri automatizzare come parte della produzione di produzione del tuo progetto in modo da non dover tenere traccia dei nomi dei file e degli ampli che cambiano; riferimenti manualmente.