Configurazione del comportamento di memorizzazione nella cache HTTP

Jeff Posnick

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 gestione Express. Mostrerà anche come verificare che il comportamento di memorizzazione nella cache previsto venga effettivamente applicato, utilizzando il riquadro Rete in DevTools di Chrome.

Nota: anche se le istruzioni specifiche sono personalizzate per Express, i principi generali sulla scelta delle intestazioni di memorizzazione nella cache corrette si applicano a qualsiasi ambiente di 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 fornisce i contenuti dell'app web. Utilizza Express per gestire le richieste e le risposte HTTP. In particolare, express.static() viene utilizzato per pubblicare tutti i file locali nella directory pubblica, quindi la documentazione di serve-static sarà utile.
• public/index.html è l'HTML dell'app web. Come la maggior parte dei file HTML, non contiene informazioni sul controllo delle versioni nell'URL.
• public/app.15261a07.js e public/style.391484cf.css sono gli asset JavaScript e CSS dell'app web. Ognuno di questi file contiene un hash nell'URL, corrispondente ai contenuti. Il index.html è responsabile di tenere traccia dell'URL con versione specifico da caricare.

Nota: nel "mondo reale", il processo di assegnazione degli hash e di aggiornamento dei file HTML per includere i riferimenti all'URL con l'ultima versione verrebbe gestito da uno strumento di build, come webpack. Ai fini di questo codelab, supponiamo che gli hash siano stati generati nell'ambito di un processo di build già avvenuto.

Configura le intestazioni di memorizzazione nella cache per il nostro 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. Inoltre, è consigliabile impostare una delle due intestazioni della risposta aggiuntive: Last-Modified o ETag. index.html rientra in questa categoria. Puoi suddividere questa operazione in due passaggi.

Innanzitutto, le intestazioni Last-Modified e ETag sono controllate dalle opzioni di configurazione etag e lastModified. Entrambe queste opzioni sono impostate su true per impostazione predefinita per tutte le risposte HTTP, quindi in questa configurazione attuale non devi attivarle per ottenere questo comportamento. Tuttavia, puoi comunque specificarlo nella configurazione.

In secondo luogo, devi essere in grado di aggiungere l'intestazione Cache-Control: no-cache, ma solo per i tuoi documenti HTML (index.html, in questo caso). Il modo più semplice per impostare questa intestazione in modo condizionale è scrivere un setHeaders function personalizzato e, al suo interno, verificare se la richiesta in entrata riguarda un documento HTML.

La configurazione di pubblicazione statica in server.js inizia così:

app.use(express.static('public'));

• Apporta le modifiche descritte sopra e dovresti ottenere un risultato simile al 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) => {
    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 di "fingerprint" o di controllo delle versioni e i cui contenuti non devono mai cambiare, aggiungi Cache-Control: max-age=31536000 alle tue risposte. app.15261a07.js e style.391484cf.css rientrano in questa categoria.

Sulla base di setHeaders function utilizzato nell'ultimo passaggio, puoi aggiungere un'ulteriore logica per verificare se una determinata richiesta è per un URL con versione e, in tal caso, aggiungere l'intestazione Cache-Control: max-age=31536000.

Il modo più efficace per farlo è utilizzare un'espressione regolare per verificare se l'asset richiesto corrisponde a un pattern specifico in cui sai che rientrano gli hash. Nel caso di questo progetto di esempio, è sempre composto da otto caratteri dell'insieme di cifre 0-9 e 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: è utile essere il più specifici possibile quando si definiscono queste regole, per proteggersi da problemi futuri. Una corrispondenza più generica, ad esempio la verifica dell'estensione del file .js o .css, potrebbe rivelarsi un problema in futuro se aggiungi al progetto altri asset JavaScript o CSS senza versione.

• Modifica la funzione setHeaders in modo che abbia il seguente aspetto:

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 Rete in DevTools di Chrome seguendo questo codelab.

Una volta apportate le modifiche al server di file statici, puoi verificare che vengano impostate le intestazioni corrette visualizzando l'anteprima dell'app pubblicata con il riquadro Rete di DevTools aperto.

• Personalizza le colonne visualizzate nel riquadro Rete per includere le informazioni più pertinenti facendo clic con il tasto destro del mouse sull'intestazione della colonna:

In questo caso, le colonne a cui prestare attenzione sono Name, Status, Cache-Control, ETag e Last-Modified.

• Con DevTools aperto nel riquadro Rete, aggiorna la pagina.

Dopo il caricamento della pagina, nel riquadro Rete dovresti visualizzare voci simili alle seguenti:

La prima riga è relativa al documento HTML a cui hai eseguito la navigazione. Questo viene pubblicato correttamente con Cache-Control: no-cache. Lo stato della risposta HTTP per questa richiesta è 304. Ciò significa che il browser sapeva di non dover utilizzare immediatamente l'HTML memorizzato nella cache, ma ha invece effettuato una richiesta HTTP al server web, utilizzando le informazioni Last-Modified e ETag per verificare se erano presenti aggiornamenti all'HTML già presente nella cache. La risposta HTTP 304 indica che non è presente codice HTML aggiornato.

Nota: Cache-Control: no-cache non significa "non utilizzare mai la copia memorizzata nella cache". Significa "controlla sempre prima con il server e utilizza la copia memorizzata nella cache se è presente una risposta HTTP 304".

Le due righe successive sono per gli asset JavaScript e CSS con controllo delle versioni. Dovresti vederle pubblicate con Cache-Control: max-age=31536000 e lo stato HTTP per ciascuna è 200. A causa della configurazione utilizzata, non viene effettuata alcuna richiesta effettiva al server Node.js e, se fai clic sulla voce, verranno visualizzati ulteriori dettagli, tra cui il fatto che la risposta proviene "(dalla cache del disco)".

I valori effettivi delle colonne ETag e Last-Modified non sono molto importanti. L'importante è verificare che vengano impostati.

Riepilogo

Dopo aver seguito i passaggi di questo codelab, ora sai come configurare le intestazioni della risposta HTTP in un server web basato su Node.js utilizzando Express per un utilizzo ottimale della cache HTTP. Inoltre, hai a disposizione i passaggi necessari per verificare che venga utilizzato il comportamento di memorizzazione nella cache previsto tramite il riquadro Rete in DevTools di Chrome.