Configurazione del comportamento di memorizzazione nella cache HTTP

Jeff 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, che esegue il framework di servizio Express. Inoltre, viene mostrato come verificare che il comportamento di memorizzazione nella cache previsto sia effettivamente applicato utilizzando il riquadro Rete in DevTools di Chrome.

Nota: anche se le istruzioni specifiche sono personalizzate per Express, i principi generali per la scelta delle intestazioni di memorizzazione nella cache corrette si applicano a qualsiasi ambiente del server web.

Acquisire dimestichezza con il progetto di esempio

Questi sono i file principali 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 pubblicare tutti i file locali nella directory pubblica, quindi la documentazione serve-static sarà utile.
• public/index.html è il codice 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. Ciascuno di questi file contiene un hash negli URL corrispondente ai relativi contenuti. index.html è responsabile del monitoraggio dell'URL specifico con versione da caricare.

Nota: nella "vita reale", il processo di assegnazione degli hash e di aggiornamento dei file HTML per includere i riferimenti all'URL con la versione più recente viene gestito da uno strumento di compilazione, come webpack. Ai fini di questo codelab, presupponiamo che gli hash siano stati generati nell'ambito di un processo di compilazione già avvenuto.

Configura le intestazioni di memorizzazione nella cache per il nostro codice HTML

Quando rispondi alle richieste di URL che non contengono informazioni sulla versione, assicurati di aggiungere Cache-Control: no-cache ai messaggi di risposta. Inoltre, è consigliabile impostare una delle due intestazioni di 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. Per entrambe queste opzioni, il valore predefinito è true per tutte le risposte HTTP, quindi in questa configurazione attuale non devi attivarle per ottenere questo comportamento. Tuttavia, puoi essere esplicito nella configurazione.

In secondo luogo, devi essere in grado di aggiungere l'intestazione Cache-Control: no-cache, ma solo per i tuoi documenti HTML (in questo caso index.html). 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 arrivo riguarda un documento HTML.

• Fai clic su Remix per modificare per rendere il progetto modificabile.

La configurazione di pubblicazione statica in server.js inizia come segue:

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 "fingerprint" o informazioni sulla versione e i cui contenuti non devono mai cambiare, aggiungi Cache-Control: max-age=31536000 alle risposte. app.15261a07.js e style.391484cf.css rientrano in questa categoria.

Sulla base del valore setHeaders function utilizzato 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ù affidabile per farlo è utilizzare un'espressione regolare per verificare se la risorsa richiesta corrisponde a un pattern specifico in cui sai che rientrano gli hash. Nel caso di questo progetto di esempio, sono sempre otto caratteri dell'insieme di cifre da 0 a 9 e delle 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: per proteggerti da problemi futuri, è consigliabile essere il più specifici possibile quando crei queste regole. Una corrispondenza più generale, ad esempio il controllo dell'estensione del file .js o .css, potrebbe creare problemi in futuro se aggiungi altri asset JavaScript o CSS non sottoposti a versione al tuo progetto.

• 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');
    }
  },
}));

Verificare il nuovo comportamento utilizzando gli Strumenti per sviluppatori

Nota: per familiarizzare con il riquadro Rete in DevTools di Chrome, consulta questo codelab.

Dopo aver apportato le modifiche al server file statico, puoi verificare che vengano impostate le intestazioni corrette visualizzando l'anteprima dell'app pubblicata con il riquadro Rete di DevTools aperto.

• Per visualizzare l'anteprima del sito, premi Visualizza app. Quindi premi A schermo intero .

• 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 da tenere d'occhio 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 vedere voci simili alle seguenti:

La prima riga è relativa al documento HTML a cui hai eseguito la navigazione. Questo viene servito correttamente con Cache-Control: no-cache. Lo stato di risposta HTTP per quella richiesta è 304. Ciò significa che il browser sapeva di non utilizzare immediatamente l'HTML memorizzato nella cache, ma ha inviato una richiesta HTTP al server web, utilizzando le informazioni Last-Modified e ETag per verificare se era presente un aggiornamento dell'HTML già presente nella cache. La risposta HTTP 304 indica che non è presente HTML aggiornato.

Nota: Cache-Control: no-cache non significa "non è mai stata utilizzata la copia 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 versione. Dovresti visualizzarle con Cache-Control: max-age=31536000 e lo stato HTTP di ciascuna è 200. A causa della configurazione utilizzata, non viene inviata alcuna richiesta effettiva al server Node.js e, facendo clic sulla voce, vengono visualizzati ulteriori dettagli, inclusa la risposta "(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 di risposta HTTP in un server web basato su Node.js utilizzando Express per un utilizzo ottimale della cache HTTP. Sono inoltre riportati i passaggi necessari per verificare che venga utilizzato il comportamento di memorizzazione nella cache previsto tramite il riquadro Rete in DevTools di Chrome.