Questo codelab mostra come modificare le intestazioni di memorizzazione nella cache HTTP restituite da un server web basato su Node.js, eseguendo il framework di servizio Express. Inoltre, mostra come confermare che il comportamento di memorizzazione nella cache previsto venga effettivamente applicato, utilizzando il riquadro Network in Chrome DevTools.
Acquisisci familiarità con il progetto di esempio
Questi sono i file chiave con cui lavorerai nel progetto di esempio:
server.js
contiene il codice Node.js che pubblica i contenuti dell'app web. Utilizza Express per gestire le richieste e le risposte HTTP. In particolare,express.static()
viene utilizzato per gestire tutti i file locali nella directory pubblica, quindi la documentazione diserve-static
ti sarà utile.public/index.html
è il codice HTML dell'app web. Come la maggior parte dei file HTML, nell'URL non contiene informazioni sul controllo delle versioni.public/app.15261a07.js
epublic/style.391484cf.css
sono gli asset JavaScript e CSS dell'app web. Questi file contengono ciascuno un hash negli URL, corrispondente ai relativi contenuti.index.html
si occupa di monitorare gli URL specifici con il controllo delle versioni da caricare.
Configura intestazioni di memorizzazione nella cache per il nostro codice HTML
Quando rispondi alle richieste di URL che non contengono informazioni sul controllo delle versioni, assicurati di aggiungere Cache-Control: no-cache
ai messaggi di risposta. Insieme a questo, è consigliabile impostare una delle due intestazioni di risposta aggiuntive: Last-Modified
o ETag
. index.html
rientra in questa categoria. Puoi suddividerlo in due passaggi.
Innanzitutto, le intestazioni Last-Modified
e ETag
sono controllate dalle opzioni di configurazione
etag
e
lastModified
. Entrambe queste opzioni in realtà sono impostate su true
per tutte le risposte HTTP, quindi in questa configurazione attuale non è necessario attivare questo comportamento. Puoi comunque essere esplicito nella tua configurazione.
Secondo, devi poter aggiungere l'intestazione Cache-Control: no-cache
, ma solo per i documenti HTML (in questo caso index.html
). Il modo più semplice per impostare questa intestazione in modo condizionale è scrivere un elemento setHeaders function
personalizzato e, al suo interno, controllare se la richiesta in arrivo riguarda un documento HTML.
- Fai clic su Remix per modificare per rendere il progetto modificabile.
La configurazione della pubblicazione statica in server.js
inizia così:
app.use(express.static('public'));
- Apporta le modifiche descritte sopra. Dovresti ottenere un risultato simile a questo:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
}
},
}));
Configura le intestazioni di memorizzazione nella cache per gli URL con versione
Quando rispondi alle richieste di URL che contengono informazioni sul "fingerprint" o sul controllo delle versioni e i cui contenuti non devono mai essere modificati, aggiungi Cache-Control: max-age=31536000
alle tue risposte. app.15261a07.js
e
style.391484cf.css
rientrano in questa categoria.
Partendo dalla struttura setHeaders function
utilizzata nell'ultimo passaggio, puoi aggiungere una logica aggiuntiva per verificare se una determinata richiesta riguarda un URL con versione e, in questo caso, aggiungere l'intestazione Cache-Control:
max-age=31536000
.
Il modo più sicuro per farlo è utilizzare un'espressione regolare per verificare se l'asset richiesto corrisponde a un pattern specifico in cui conosci gli hash. Nel caso di questo progetto di esempio, la lunghezza è sempre 8 caratteri dell'insieme di cifre 0-9 e le lettere minuscole a-f (ovvero caratteri esadecimali). L'hash
è sempre separato da un carattere .
su entrambi i lati.
Un'espressione regolare che
corrisponde a queste regole generali
può essere espressa come new RegExp('\\.[0-9a-f]{8}\\.')
.
- Modifica la funzione
setHeaders
in modo che risulti come la seguente:
app.use(express.static('public', {
etag: true, // Just being explicit about the default.
lastModified: true, // Just being explicit about the default.
setHeaders: (res, path) => {
const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');
if (path.endsWith('.html')) {
// All of the project's HTML files end in .html
res.setHeader('Cache-Control', 'no-cache');
} else if (hashRegExp.test(path)) {
// If the RegExp matched, then we have a versioned URL.
res.setHeader('Cache-Control', 'max-age=31536000');
}
},
}));
Conferma il nuovo comportamento utilizzando DevTools
Una volta apportate le modifiche al file server statico, puoi verificare che vengano impostate le intestazioni corrette visualizzando l'anteprima dell'app attiva con il riquadro Network DevTools aperto.
Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .
Personalizza le colonne visualizzate nel riquadro Rete in modo da includere le informazioni più pertinenti, facendo clic con il tasto destro del mouse sull'intestazione della colonna:
Qui le colonne a cui prestare attenzione sono Name
, Status
, Cache-Control
,
ETag
e Last-Modified
.
- Con DevTools aperto nel riquadro Network, aggiorna la pagina.
Dopo che la pagina è stata caricata, nel riquadro Network dovrebbero essere visualizzate voci simili alle seguenti:
La prima riga è per il documento HTML che hai raggiunto. Viene pubblicato correttamente con Cache-Control: no-cache
. Lo stato della risposta HTTP per la richiesta è 304
. Ciò significa che il browser ha saputo non utilizzare immediatamente il codice HTML memorizzato nella cache, ma ha inviato una richiesta HTTP al server web, utilizzando le informazioni Last-Modified
e ETag
per verificare se c'erano aggiornamenti al codice HTML già presenti nella cache. La risposta HTTP 304 indica che non è disponibile HTML aggiornato.
Le due righe successive riguardano gli asset JavaScript e CSS con il controllo delle versioni. Dovresti
vederle pubblicate con Cache-Control: max-age=31536000
e lo stato HTTP di
ciascuna è 200
.
A causa della configurazione utilizzata, non viene effettuata alcuna richiesta al server Node.js e, facendo clic sulla voce, verranno visualizzati ulteriori dettagli, tra cui la risposta "(dalla cache del disco)".
I valori effettivi per le colonne ETag e Last-Modified non sono importanti. L'importante è verificare che siano impostati.
Riepilogo
Dopo aver seguito i passaggi di questo codelab, sai come configurare le intestazioni delle risposte HTTP in un server web basato su Node.js tramite Express, per un utilizzo ottimale della cache HTTP. Disponi inoltre dei passaggi necessari per verificare che venga utilizzato il comportamento di memorizzazione nella cache previsto tramite il riquadro Rete in DevTools di Chrome.