Configurazione del comportamento di memorizzazione nella cache HTTP

Jacopo Posnick

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Nota: questo codelab utilizza Chrome DevTools. Scarica Chrome, se non l'hai ancora fatto.

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.

Nota: sebbene le istruzioni specifiche siano personalizzate per Express, i principi generali relativi alla scelta delle intestazioni di memorizzazione nella cache corrette si applicano a qualsiasi ambiente server web.

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 di serve-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 e public/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.

Nota: nel "mondo reale", il processo di assegnazione degli hash e aggiornamento dei file HTML in modo da includere riferimenti all'URL con il controllo delle versioni più recente veniva gestito da uno strumento di creazione come webpack. Ai fini di questo codelab, supponiamo che gli hash siano stati generati come parte di un processo di compilazione già in corso.

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}\\.').

Nota: è consigliabile essere il più specifici possibile quando si stabiliscono queste regole per evitare problemi futuri. Una corrispondenza più generale, come il controllo dell'estensione del file .js o .css, potrebbe essere un problema se continui ad aggiungere al tuo progetto ulteriori asset JavaScript o CSS senza versione.

• 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

Nota: puoi acquisire familiarità con il riquadro Network in DevTools di Chrome consultando questo codelab.

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.

Nota: Cache-Control: no-cache non significa "non ho mai utilizzato la copia memorizzata nella cache". Significa: "verifica sempre prima il server e utilizza la copia memorizzata nella cache in caso di risposta HTTP 304".

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.