Salvataggio della modifica dello stile per la cache. La migliore pratica di keshuvannya. Metodo di cache alternativo per .htaccess
A volte è necessario bloccare il browser per memorizzare nella cache la pagina, i frammenti di informazioni su di essa vengono aggiornati rapidamente. Puoi anche generare dati scegliendo filtri o altri contenuti, che verranno creati in un modo nuovo. In una parola, ci sono momenti in cui è necessario bloccare il programma per incassare a lato. Oggi sappiamo come implementare diversi modi, h aiuta PHP HTML o .htaccess.
Recinzione della cache su HTML
Puoi farlo per aiuto con i meta tag. Alla volta, analizzeremo le diverse opzioni per il recinto della cache.
Recinzione sulla cache tramite browser e server proxy
Fence cache storіnki, meno di un browser
Installazione della cache su ora dell'appuntamento per browser
Per aiutare il codice seguente, possiamo dire al browser come salvare il documento dalla cache. Dopodiché la cache verrà aggiornata.
Impostazione della cache per l'ultima ora per il server proxy
Potrebbe essere lo stesso del codice di inoltro, solo il costo per il server proxy.
Smetti di incassare aiuto PHP
In pratica, tutte le stesse cose che sono visibili in HTML, visualizzano le informazioni solo attraverso le intestazioni di intestazione. Axis come implementare un recinto assoluto sulla cache:
", date("H:i:s"), ""; ?>
È anche possibile consentire keshuvati per l'ora del canto. Ad esempio, è consentito incassare per meno di 1 anno.
", date("H:i:s"), ""; ?>
Risparmia i soldi dal lato per chiedere aiuto. htaccess
Per facilitare l'implementazione dell'idea, puoi fare tutto su configurazioni uguali Server Apache. Prima di questo, dobbiamo riconsiderare quali sono i moduli necessari nell'ambiente di lavoro. Vidkrivаєmo konfіguratsіy File Apache E temo di venire alla foto:
LoadModule scade_module moduli/mod_expires.so LoadModule headers_module moduli/mod_headers.so ... AddModule mod_expires.c AddModule mod_headers.c
Ora il file .htaccess, che è protetto dai dati memorizzati nella cache. Come puoi vedere, il file .htaccess verrà espanso nella directory a cui appartiene e in tutte le sottodirectory.
# Intestazione di controllo della cache
È importante rispettare il fatto che la barriera del flusso di cassa sta spingendo l'interesse al server. Tom, stai attento con zim! Ed è meglio impostare un'ora della canzone, per la quale puoi salvare i documenti. Ad esempio, impostiamo una cache per 1 anno:
# Intestazione di controllo della cache
Visnovok
Quando apportiamo modifiche al sito, ci atteniamo spesso ad esso, perché al posto dei lati, i file CSS e gli script (.js) vengono memorizzati nella cache dal browser ed è impossibile farlo per molto tempo. Per fare in modo che le modifiche da apportare appaiano in tutti i browser, è necessario abituare i client alle combinazioni di piegatura F5 o Ctrl+F5. І ora nell'ora della stezhity, in modo che il fetore si precipitò.
Il processo di finitura è noioso e poco pratico. Puoi facilmente uscire dalla situazione rinominando i file, ma non posso farlo di nuovo.
Tuttavia, c'è un modo per consentire l'eccesso con troppi nomi e rilasciare i file cache.css o .js in quel momento, se ne abbiamo bisogno. Dimentica per sempre Ctrl+F5.
La linea di fondo è che assegniamo ai nostri file .css o .js alla fine uno pseudo-parametro, che cambia l'ora in un'ora e allo stesso tempo svuota la cache dal browser.
In questo ordine, la voce nel codice di uscita ora appare così:
De 186485 - una bella combinazione, in modo da poter vedere lo stesso file, ma il browser lo interpreta come nuovo, pseudoparametro zavdyaki ?186485
Ora, per non modificare tutti gli input del nostro parametro, lo inseriamo in un file php, che è collegato a tutte le cose di cui abbiamo bisogno:
">
Nel file param.php, potresti aver bisogno di:
Pronto! Ora quando si cambia il file param.php I file della cache vengono eliminati.
E Joomla?
Qui, i rivenditori hanno già pensato a tutto per noi e dovremmo seguire la sintassi accettata:
JHtml::_("stylesheet", "template.css", array("version" => "auto", "relative" => true)); JHtml::_("script", "template.js", array("version" => "auto", "relative" => true));
Codice di assegnazione per includere il file CSS template.css (o template.js per il file con 3 script) dalla cartella del modello. La sostituzione "versione" => "auto" può essere impostata sia che si tratti di un valore, ad esempio "versione" => "1.1" - in uscita, questo parametro deve essere utilizzato quando si collega un file, dopo il segno di alimentazione.
Il parametro relativo => true significa che il sistema dovrebbe essere in grado di conoscere il file di riferimento per la cartella del modello. In alternativa, relativo => false, dovrai specificare il percorso del file .css o .js
Alcune persone pensano che i file CSS siano promossi, che siano collegati tramite link o @import - non memorizzare nella cache. Impressioni per deluderti. Il css stesso è memorizzato nella cache in un file okremium, inoltre è meglio, direi visibilmente. Queste informazioni sono state verificate autenticamente in 6 e più e altri browser. Bagato kohana viene incassato in tali file zovsіm s wild swidkіstyu, otrimuє primo posto per qiu a destra. A proposito, c'è molto in cui il meccanismo stesso di Opera può avere molta fluidità in browser simili. Ma sarò sicuro di menzionare che la cache molto "super" in Opera è un disastro con la tecnologia AJAX. A quell'ora, come nel caso di vikoristanny AJAX per apportare modifiche mazzi chiki, Opera invecchia. Ale tse canzone okremoї quelli.
Cache CSS
ALE! Buvayut a problemi di lutto deyakih direttamente in tsomu. Di norma, con la configurazione errata del server Apache, che tipo di non riconosce le intestazioni corrette. E per l'aiuto dell'intestazione, puoi memorizzare nella cache i file. Per zamovchuvannyam, ovviamente, cache di inclusioni. Ale traplyayutsya vpadki, se non è necessario memorizzare nella cache i file. Per chi già i professionisti iniziano a ballare con i tamburelli per guidare le intestazioni HTTP. Tuttavia, se stai leggendo di nuovo questo articolo, sei ancora molto lontano dall'escape delle intestazioni HTTP. Ti canto, che nella prossima ora non ti fermi a tali compiti. Eppure, come se stessi piangendo nel profondo della tua anima, allora descriveremo brevemente come la vedi.
- invia l'intestazione HTTP al server WEB - dì chuesh, pepe di liquirizia, dammi un file CSS, altrimenti ho CSS, ma cambia quelli per il resto dell'ora.
- E il server per dirti che mi dispiace, così salato, non ci sono stati cambiamenti annuali in quel momento, prendilo e sii audace con il tuo vecchio CSS.
- Se il CSS viene modificato, il browser aggiorna stupidamente il CSS nella cache.
E ora, anche se non esausti, poi troch di spazzatura scientifica sotto forma di una specie di esperimento.
Dirò il testo in basso ai neofiti del WEB, sarà capito debolmente. In generale, andrà bene per noi, che sono rimasti bloccati a causa dell'inclusione di quella cache inclusa.
Tutti gli esperimenti sono stati effettuati su uno reale, a pagamento. Un buon hoster, che ti consente di modificare la struttura delle intestazioni HTTP, senza essere paranoico a rompere l'intestazione HTTP :)
Modalità browser
Padre, sii presente con qualsiasi browser 2 modalità:
1. Modalità bloccata per ruotare l'intestazione:
Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0
2. La modalità consente di abilitare la cache per ruotare l'intestazione:
Cache-Control: privato, max-age=10800, pre-check=10800
Successivamente, descriverò il comportamento dei browser
Firefox 3.5 e altro
Primo La modalità non è memorizzata correttamente nella cache, ma i file JavaScript non sono controllati, quindi primus non aggiorna la pagina. Il CSS viene riscritto con un'intestazione.
If-Modified-Since: "data corrente" GMT If-None-Match: "own hash code"
Il CSS viene reinventato, solo non appena viene realmente aggiornato.
Ad un altro la modalità smette di cambiare lato. Pertanto, abbiamo modificato il contenuto del data base, che viene visualizzato a lato - che non viene mostrato, è necessario modificare il contenuto del primus-primus, in quello che viene corretto dalla richiesta:
GET / HTTP/1.1 Host: xxx.com If-Modified-Since: data GMT corrente
e tenere conto di:
HTTP/1.1 304 Non modificato
Internet Explorer 8 (IE8)
Primo Le modalità di Internet Explorer abilitano If-Modified-Since e If-None-Match e per JavaScript e CSS per disabilitare JavaScript e CSS solo perché puzza davvero. Quegli stessi yakscho primusovo cambiano lato.
Ad un altro La modalità Internet Explorer sovrascrive anche If-Modified-Since e If-None-Match per JavaScript e CSS. Ma se scegli di navigare, non aiuta avviare/aggiornare il lato stesso, quindi la navigazione non forza l'input, quindi il tuo js / css viene aggiornato e il modello e il contenuto del lato - no. Per aggiornare il contenuto, non aiuta portare il lato aggiornamento primus.
Opera 10 e precedenti
Primo Modalità Opera, nella prima modalità, aggiornamento js e CSS da memorizzare nel fatto che l'opzione Verifica immagini è impostata nelle impostazioni. Se l'opzione è impostata su Sempre, l'operatore sovrascrive If-Modified-Since e If-None-Match per riconvalidare gli aggiornamenti js&css. Se il valore è impostato, ad esempio, 5 anni, è necessario riconsiderare ogni 5 anni o l'aggiornamento primus del lato.
Ad un altro modalità, Opera non sovrascrive gli aggiornamenti js e CSS (non ruba le richieste GET) e non ruba le richieste GET sul lato stesso, quindi non riceviamo aggiornamenti js e css, non ci interessa aggiornare i contenuti , come in altri browser. E l'asse іz primsovim novlennyam all'Opera è più bello. Nella vista di IE & FF, Opera mostra esplicitamente il lato senza If-Modified-Since e If-None-Match. Chiedi l'aggiornamento di js e css quando usi l'aggiornamento di primus, procedi allo stesso modo di If-Modified-Since e If-None-Match.
Visnovki
- Keshuvannya, che sicuramente non mostra come funziona in diversi browser e come viene ereditato, non è sicuro dirlo.
- Il cashback può essere attivato solo se il lato viene aggiornato raramente (quindi non ci sono pagine sul sito, in quanto vengono aggiornate in tempo reale)
- FireFox si comporta, a mio parere, un po' più intelligente di IE, quindi quando la memorizzazione nella cache è abilitata, non sovrascrive l'aggiornamento costante di JavaScript, che sembra logico, anche se JavaScript viene aggiornato molto raramente.
- Opera ti consente di modificare gli aggiornamenti delle immagini, JavaScript e CSS per un'ulteriore personalizzazione delle immagini di controllo, il che è un vantaggio. Quindi l'Opera stessa si comporta meglio di IE e FF quando la cache è attivata e l'aggiornamento di primus è attivo, quindi, immagino, l'Opera in qualche modo si aggiornerà invece del lato, e IE e FF ti priveranno del felice sconosciuto.
Buona fortuna a te e ai siti di avvio.
- htaccess cache salva il sito web sul computer locale, se corretto;
- Cache Vykoristannya del browser: il webmaster fornisce istruzioni ai browser, come guardare le risorse.
Se il browser visualizza la pagina web, è colpa del logo, del file CSS e di altre risorse:
La cache del browser ricorderà le risorse, poiché il browser ne ha già approfittato. Se vai dall'altra parte del sito, logo, file CSS, ecc. non è colpa tua ricominciare, perché il browser li ha già dimenticati (salva). Qual è il motivo per cui la prima ora della prima visita al sito richiede più di un'ora, inferiore per quelle ripetute.
Se vinci una cache, i file del sito Web verranno salvati nella cache del browser. I lati saranno zavantazhuvatsya a una velocità diversa quando ripetuti vіdvіduvannyah. Sarà anche con altre parti, come vikoristovuyut meno risorse.
Come disabilitare la cache nel browser
- Cambia le intestazioni per la richiesta di risorse, per vincere la cache;
- Ottimizza la tua strategia di incasso.
Modifica le intestazioni nella richiesta
Per la maggior parte delle persone, l'unico modo per memorizzare nella cache un sito htaccess è aggiungere codice al file .htaccess sul server web.
Il file .htaccess controlla molti parametri importanti per il tuo sito web.
Cache del browser tramite file .htaccess
Il puntamento sotto il codice indica al browser cosa memorizzare nella cache e come ricordarlo a lungo. Yogo sled aggiunge la pannocchia al file .htaccess:
## SCADENZA CACHING ##
Salva il file .htaccess e aggiorna la pagina web.
Come impostare l'ora della cache per diversi tipi di file
Il codice al passaggio del mouse ha un intervallo di un'ora impostato. Ad esempio, 1 rіk (1 rіk) o 1 mese (1 mese). La puzza è legata ai tipi di file. La guida è più alta, il codice è installato, in modo che i file .jpg (immagine) debbano essere memorizzati nella cache per molto tempo.
Yakby voleva cambiare il fatto che le immagini JPG sono state memorizzate nella cache per un mese, quindi hai semplicemente sostituito "1 fiume" con "1 mese". Specificare un valore di cache più alto tramite htaccess è ottimale per la maggior parte dei siti web.
Metodo di cache alternativo per .htaccess
Altre descrizioni del metodo sono chiamate " Scade“Vin aiuta a incassare più nuovi arrivati. Poiché è più facile gestire la memorizzazione nella cache, puoi provare un altro metodo di memorizzazione nella cache di Cache-Control, che ti offre più opzioni.
Forse il metodo Expires non funziona sul tuo server, nel qual caso potresti provare a modificare Cache-Control .
Controllo della cache
Questo metodo ti consente di assumere un maggiore controllo sulla memorizzazione nella cache delle pagine nei browser, ma è meglio che qualcuno sappia che è più facile scrivere tutte le impostazioni una volta.
Un esempio di variazione del file .htaccess:
#1 mese per la maggior parte delle risorse statiche
Il codice hover imposta l'intestazione Cache-Control in modo appropriato per il tipo di file.
Come usare il controllo della cache
Diamo un'occhiata alla riga del codice della cache nel browser htaccess:
#1 mese per la maggior parte delle risorse statiche
Questa riga è solo una nota. Il file .htaccess ignora le righe che iniziano con il carattere #. Questa nota è consigliata perché puoi avere diversi set di dati come soluzione per la memorizzazione nella cache dei file:
C'è una fila di ipotesi, sembra, scho, Se il file sarà di uno di questi tipi, lavoreremo con esso.»
I più importanti in questa riga sono quelli che si trovano nella nuova ristrutturazione di diversi tipi di file ( css, JS, JPEG, PNG e così via. ) e quali istruzioni della cache devono essere caricate in questi tipi di file. Ad esempio, se ritieni che i file JPG non siano stati memorizzati nella cache per un certo periodo di tempo, puoi vedere " JPG“. Se vuoi aggiungere HTML, devi inserire in questa riga " HTML«:
Header set Cache-Control "max-age=2592000, public"
La riga assegnata ha le intestazioni e i significati effettivi:
- Parte " Intestazione set Cache-Control» - Inserisci il titolo;
- Zminna" età massima=2592000» - Mostra quanto tempo impiega il processo di prelievo (in secondi). In questo periodo, siamo in grado di incassare per un mese (2592000) secondi;
- Parte " pubblico» Fammi sapere di quelli che sono prontamente disponibili.
Questa riga della cache tramite htaccess chiude l'operatore e termina il blocco di codice.
Il problema scottante della cassa
Mentre fai un elenco di immagini, poiché verranno incassate per più rock e altro, ricorda che mentre apporti modifiche ai tuoi fianchi, il fetore potrebbe non essere visibile a tutti i coristuvacha. Oscilki koristuvachi torna ai file che stanno incassando, e non a quelli essenziali. Questo è un file che modifichi periodicamente ( ad esempio - file CSS), quindi puoi risolvere il problema della cache per un URL bitcoin digitale aggiuntivo.
URL bitcoin digitale
La rimozione di una nuova risorsa file, che non è memorizzabile nella cache, è possibile per la presenza di un nome univoco. Ad esempio, se il file CSS nomina "main.css", allora potremmo chiamarlo "main_1.css". La prossima volta, se cambiamo il nome, possiamo nominare il file "main_2.css". Ciò è appropriato per i file che vengono periodicamente modificati.
Se l'incasso è fatto correttamente dà un grande slancio alla produttività, fa risparmiare traffico e cambia il costo al server, il software sui siti ricchi dell'incasso è implementato poco distante, il che crea un campo di gara, che fa apparire la sincronizzazione delle risorse reciproche.
Più importanti sono le migliori pratiche per incassare uno dei due modelli:
Schema n. 1: contenuto fisso e cache di età massima a lungo termine
Cache-Control: max-age=31536000- Vmist per URL non viene modificato, quindi...
- Un browser o una CDN possono facilmente memorizzare nella cache una risorsa su un fiume
- I contenuti memorizzati nella cache più giovani per attività di età massima possono essere violati senza consultare il server
Storinka : Gay, ho bisogno di "/script-v1.js", "/styles-v1.css" e "/cats-v1.jpg" 10:24
Contanti : Ho vuoto, quanto sei bravo, Servere? 10:24
server : Ok, l'asse puzza. Fino al discorso, Kesh, їх varto vikoristati non allunga più il rock. 10:25
Contanti : GRAZIE! 10:25
Storinka : Evviva! 10:25
giorno a venire
Storinka : Gay, ho bisogno di te "/script- v2.js" , "/stili- v2.css" e "/cats-v1.jpg" 08:14
Contanti : L'immagine con i gatti è che non puoi risolverlo. Server? 08:14
server : Facile: l'asse dei nuovi CSS e JS. Ancora una volta, Kesh: il termine di pertinenza non è altro che destino. 08:15
Contanti : Super! 08:15
Storinka : Grazie! 08:15
Contanti : Hmm, non ho copiato "/script-v1.js" e "/styles-v1.css" per molto tempo. È giunto il momento di vederli. 12:32
Pattern colpo di frusta, non modificare in alcun modo il contenuto dell'URL del brano, cambi l'URL stesso:
L'URL della skin ha la possibilità di cambiare contemporaneamente dal contenuto. Puoi avere un numero di versione, una data modificata o un contenuto hash (ho scelto questa opzione per il mio blog).
La maggior parte dei framework lato server dispone di strumenti che consentono di utilizzare facilmente un discorso simile (Django ha lo stravagante Manifest Static Files Storage); Ci sono anche alcune piccole librerie in Node.js che rivedono le tue attività, ad esempio, gulp-rev.
Tuttavia, questo modello non è adatto per discorsi come articoli e post di blog. Il tuo URL non può essere versionato, ma può invece essere modificato. Seriamente, ho spesso perdoni grammaticali e di punteggiatura, che richiedono la capacità di un aggiornamento svedese insieme.
Pattern n. 2: il contenuto modificato deve essere riconvalidato sul server
Controllo della cache: nessuna cache- Con la modifica dell'URL, d'ora in poi...
- Che si tratti di una versione memorizzata nella cache locale, non può essere battuta senza un accesso al server.
Storinka : Gay, ho bisogno di "/about/" e "/sw.js" 11:32
Contanti : Niente che posso aiutare. Server? 11:32
server : Si si. Kesh, tienili con te, ma nutrimi davanti alle vittorie. 11:33
Contanti : Si signore! 11:33
Storinka : GRAZIE! 11:33
Per il giorno successivo
Storinka : Gay, rinnoverò il mio bisogno di "/about/" e "/sw.js" 09:46
Contanti : Khvilinka. Server, con le mie copie va tutto bene? Una copia di "/about/" è di lunedì e "/sw.js" è di ieri. 09:46
server : "/sw.js" non è cambiato... 09:47
Contanti : Freddo. Storinka, taglia "/sw.js" . 09:47
server : ...ma "/about/" ho una nuova versione. Kesh, trimay її, ale yak e l'ultima volta, non dimenticare di dormire con me. 09:47
Contanti : sensato! 09:47
Storinka : Miracoloso! 09:47
Nota: no-cache non significa "non memorizzare nella cache", significa "verificare" (o riconvalidare) la risorsa memorizzata nella cache dal server. Invece di incassare, punisci il browser con il no-store. Inoltre, must-revalidate non significa riconvalida obov'yazkovu, ma coloro che hanno memorizzato nella cache la risorsa vincono solo giovani quanto i più giovani, compiti di età massima inferiore e solo in un altro tipo di riconvalida. L'asse è quindi tutto viene lanciato con le parole chiave per la cache.
Per questo modello, puoi aggiungere un ETag (ID versione a tua scelta) o un'intestazione Last-Modified all'output. Quando viene attaccato, viene visualizzato If-None-Match o If-Modified-Since invece del lato client, consentendo al server di dire "Wack quelli che hai, la tua cache è aggiornata" per trasformare HTTP 304.
Anche se ETag / Last-Modified non è abbastanza potente, il server deve essere forzato di nuovo.
Questo modello è sempre vimage al punto di misura, al punto che non è un tale garni, come il primo modello, che può essere eliminato senza semplici bevande.
Non è raro, se non disponiamo di un'infrastruttura sufficiente per il primo pattern, ma possiamo anche risolvere i problemi con le risorse nel pattern 2. Il risultato vince la versione intermedia: età massima breve e contenuto che cambia. Questo sporco compromesso.
L'elenco di età massima per i contenuti che cambiano di solito è la scelta sbagliata
Io, sfortunatamente, a causa delle estensioni, come culo puoi visitare le pagine di Github.
Spettacolo:
- /articolo/
- /stili.css
- /script.js
Intestazione del server Іz:
Cache-Control: deve essere riconvalidato, max-age=600
- Cambiare l'URL
- Sebbene nel browser la nuova versione sia memorizzata nella cache per 10 minuti, non vincerà senza consultare il server
- Poiché non esiste tale cache, può essere recuperata al minimo, se possibile con If-Modified-Since o If-None-Match
Storinka : Gay, ho bisogno di "/article/", "/script.js" e "/styles.css" 10:21
Contanti : Non ho niente, come te, Server? 10:21
server : Nessun problema, puzza. Ma ricorda, Kesh: puoi battere le 10 fruste più vicine con un allungamento. 10:22
Contanti : Є! 10:22
Storinka : GRAZIE! 10:22
Storinka : Gay, avrò bisogno di nuovo di "/article/", "/script.js" e "/styles.css" 10:28
Contanti : Oops, sto digitando, ma ho digitato "/styles.css", altrimenti ho є, trim. Server, puoi inviarmi "/styles.css"? 10:28
server : È facile, sono già cambiata da quell'ora, come se avessi fatto yoga tempo fa. Nayblizhchi 10 hvilin puoi vincere coraggiosamente lo yoga. 10:29
Contanti : Nessun problema. 10:29
Storinka : Grazie! Ale, indovina un po', è andato storto! Si è rotto tutto! Cosa sta succedendo? 10:29
Questo padre può avere il diritto di vivere mentre viene messo alla prova, ma è fin troppo facile da capire per un vero progetto. Nell'applicazione, il server ha aggiornato HTML, CSS e JS, ma è stato aggiunto alla parte con il vecchio HTML e JS dalla cache, fino a quando gli aggiornamenti CSS non sono stati aggiunti dal server. La distribuzione delle versioni è tutta pseudo.
Spesso, quando apportiamo modifiche significative all'HTML, cambiamo anche CSS, per la corretta visualizzazione della nuova struttura, e JavaScript, in modo che non influisca sul contenuto e sugli stili. Tutte le risorse sono indipendenti, ma le intestazioni della cache non sono facili da usare. Di conseguenza, gli originali potrebbero avere una vecchia versione di una/due risorse e una vecchia versione di altre.
max-age viene impostato ogni ora, in modo che tutte le risorse vengano trasferite come parte dello stesso indirizzo, il termine viene suddiviso in una volta e quindi c'è una piccola possibilità di sincronizzazione. Se hai pagine che non includono JavaScript o altri stili, i termini di applicabilità della cache non saranno sincronizzati. Inoltre, il browser si sposta costantemente nella cache, non sapendo che HTML, CSS e JS sono reciprocamente dipendenti, quindi puoi vincere per la gioia di uno della lista e dimenticare tutto il resto. Vrahovyuchi tutti i fattori contemporaneamente, sei colpevole di capire che la possibilità della comparsa di versioni non corrispondenti è grande.
Per un koristuvach, il risultato potrebbe essere una disposizione incrinata del lato e altri problemi. Da piccoli difetti a contenuti irrilevanti.
Per carità, koristuvachi potrebbe avere una vacanza libera.
Aggiornamento del lato dell'altro lato
Poiché il lato è occupato dal percorso di aggiornamento, i browser devono sempre eseguire la riconvalida del server, ignorando max-age. Per questo, poiché il koristuvach si è sbagliato dopo la massima età, un semplice aggiornamento del lato può risolvere tutto. Ale, zrozumilo, dopodiché, quando vengono trovati i cucchiai, l'assedio andrà tutto perso e l'installazione sul tuo sito sarà diversa.
Service Worker può continuare la vita di questi bug
Ad esempio, hai il seguente lavoratore del servizio:
conversione="2"; self.addEventListener("install", event => ( event.waitUntil(caches.open(`static-$(version)`) )then(cache => cache.addAll([ "/styles.css", "/script .js" ])))); )); self.addEventListener("activate", event => ( // …elimina le vecchie cache... )); self.addEventListener("fetch", event => ( event.respondWith(caches.match(event.request) .then(response => risposta || fetch(event.request))); ));
Operaio Cai:
- script e stili della cache
- vincere denaro quando zbіgu, іnakshe zbіtaєє per fondersi
Quando cambiamo CSS/JS, cambiamo anche il numero di versione, che avvia l'aggiornamento. Tuttavia, gli shard di addAll sono tornati nella cache, quindi possiamo imbatterci in una corsa attraverso l'età massima e le versioni sbagliate di CSS e JS.
Inoltre, poiché puzzolente memorizzato nella cache, avremo CSS e JS pazzi prima che l'operatore di servizio venga aggiornato e non sarà più utilizzabile quando la gara verrà aggiornata.
Puoi saltare la cache nel lavoratore del servizio:
Self.addEventListener("install", event => ( event.waitUntil(caches.open(`static-$(version)`) )then(cache => cache.addAll([ new Request("/styles.css", (cache: "no-cache")), Nuova richiesta ("/script.js", (cache: "no-cache"))))));));
Sfortunatamente, le opzioni per la memorizzazione nella cache non sono supportate in Chrome/Opera e sono state aggiunte solo a Firefox, ma puoi farlo da solo:
Self.addEventListener("install", event => ( event.waitUntil(caches.open(`static-$(version)`) )then(cache => Promise.all([ "/styles.css", "/script .js" ].map(url => ( // cache-bust usando una stringa di query casuale return fetch(`$(url)?$(Math.random())`).then(response => ( // fail su 404, 500 ecc. se (!response.ok) lancia Error("Non ok"); return cache.put(url, response);
Per questa applicazione, elimino la cache per un numero aggiuntivo, oppure puoi aggiungerne altri cinque e aggiungere un hash al contenuto per un'ora di archiviazione (è simile a quelli che rubano sw-precache). Questa è una sorta di implementazione del primo modello per l'aiuto di JavaScript, ma funziona solo con il service worker e non con browser e CDN.
Service-workers e HTTP-cache lavorano miracolosamente insieme, non esitate a combatterli!
Come un bachite, puoi aggirare la grazia per aver incassato il tuo addetto ai servizi o, più correttamente, trovare la radice del problema. La corretta configurazione della cache non solo rende più semplice il robot del lavoratore, ma aiuta anche i browser a non supportare gli operatori di servizio (Safari, IE/Edge) e ti consente anche di ottenere il massimo dalla tua CDN.
Le intestazioni della cache corrette possono accelerare notevolmente gli aggiornamenti degli addetti al servizio.
conversione="23"; self.addEventListener("install", event => ( event.waitUntil(caches.open(`static-$(version)`) )then(cache => cache.addAll([ "/", "/script-f93bca2c) .js", "/styles-a837cb1e.css", "/cats-0e9a2ef4.jpg" ]))); ));
Qui ho memorizzato nella cache la pagina principale con il modello n. 2 (riconvalida del server) e tutte le altre risorse con il modello n. 1 (contenuto immutabile). L'aggiornamento della skin del lavoratore del servizio verrà richiesto al lato root e sarà meno probabile che la riscrittura delle risorse prenda il sopravvento, poiché i loro URL cambieranno. Lo facciamo bene, risparmiamo traffico e aumentiamo la produttività, indipendentemente dal fatto che tu stia aggiornando dalla precedente o anche dalla vecchia versione.
In questo caso, c'è un vantaggio significativo rispetto all'implementazione nativa, se un binario binario è concepito per essere lanciato con una piccola modifica, o se risulta in un complesso accoppiamento di due file. Quindi possiamo aggiornare un ottimo programma web con lo stesso piccolo interesse.
È più probabile che i lavoratori dei servizi lavorino come poliziotti e non come agenti di polizia, quindi usa la cache invece di quella per combattere con lui.
Con un'attenta selezione di età massima e contenuti che cambiano, può essere anche migliore
max-age è spesso la scelta sbagliata per i contenuti che cambiano, ma non importa. Ad esempio, le statistiche originali di età massima diventano tre aculei. Il campo di gara non è un problema, dal momento che non ci sono maggese sul lato che è disponibile lo stesso modello di incasso (CSS, JS e modello di assorbimento dell'immagine n. 1 - contenuto costante), tutto il resto non è virato.
Questo schema significa che sto scrivendo un articolo popolare con calma, e il mio CDN (Cloudflare) può prendere traffico dal server, quindi, ovviamente, mi sto preparando a inviare tre chicche, i dock dell'articolo aggiornato diventeranno disponibili per il nucleo.
Questo padre dovrebbe vincere senza fanatismo. Come se avessi aggiunto una nuova divisione allo statuto e ne avessi inserita una nuova per l'altro statuto, ho creato un errore, poiché ho bisogno di virishuvate. Koristuvach può premere sul messaggio e prendere una copia dell'articolo senza divisione. Se voglio eliminarlo, posso aggiornare l'articolo, vedere l'opzione di memorizzazione nella cache delle statistiche di Cloudflare, aggiungere tre crediti e aggiungere più potenza a un'altra statistica. Quindi, questo modello richiederà cautela.
Con la giusta scelta della cache, offre una significativa riduzione della produttività e risparmi sul traffico. Passa contenuto immutabile, in modo da poter modificare facilmente l'URL o taggare la riconvalida lato server. Cambia l'età massima e cambia il contenuto, in modo da poter essere allegro e convinto che il tuo contenuto non sia troppo vecchio, quindi può perdere la sincronizzazione.
