Configurazione del comportamento di memorizzazione nella cache HTTP

Jeff Posnick

Questo codelab ti mostra come modificare le intestazioni di memorizzazione nella cache HTTP restituite da un Server web basato su Node.js, che esegue la pubblicazione Express il modello di machine learning. Mostra inoltre come confermare che il comportamento di memorizzazione nella cache previsto viene effettivamente applicata, usando il riquadro Rete in DevTools di Chrome.

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 gestisce il traffico dell'app web contenuti. Utilizza Express per gestire le richieste HTTP. e risposte. In particolare, express.static() viene utilizzato per pubblicare i file locali nella directory pubblica, quindi serve-static documentazione sarà utile.
• public/index.html è il codice HTML dell'app web. Come la maggior parte dei file HTML, contenere informazioni sul controllo delle versioni nell'URL.
• public/app.15261a07.js e public/style.391484cf.css sono gli elementi JavaScript dell'app web e CSS. Ciascun file contiene un hash negli URL, corrispondenti ai loro contenuti. index.html ha la responsabilità di conservare per tenere traccia di quale URL specifico del controllo delle versioni caricare.

Configura le 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 si consiglia di impostare una delle due intestazioni di risposta aggiuntive: Last-Modified o ETag. La index.html rientra in questa categoria. Puoi suddividerlo in due passaggi.

Innanzitutto, le intestazioni Last-Modified e ETag sono controllate dalla etag: e lastModified opzioni di configurazione. Entrambe queste opzioni sono impostate sul valore predefinito true per tutte Risposte HTTP, pertanto con l'attuale configurazione non devi attivare la ricezione comportamento degli utenti. Puoi comunque essere esplicita nella tua configurazione.

In secondo luogo, devi poter aggiungere elementi nell'intestazione Cache-Control: no-cache, solo per i documenti HTML (in questo caso index.html). Il modo più semplice impostare in modo condizionale questa intestazione sia scrivere un'immagine setHeaders function, e al suo interno verifica se la richiesta in arrivo riguarda un documento HTML.

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

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

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

• Apporta le modifiche descritte sopra per ottenere qualcosa che ha 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) => {
    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 sottoposti a controllo delle versioni

Quando si risponde a richieste di URL che contengono "impronta" o informazioni sul controllo delle versioni e i cui contenuti non devono mai essere modificati, Cache-Control: max-age=31536000 alle tue risposte. Le app.15261a07.js e style.391484cf.css rientrano in questa categoria.

Edificio fuori dal setHeaders function usata nell'ultimo passaggio, puoi aggiungere un'ulteriore logica per verificare se una determinata riguarda un URL con controllo delle versioni e, in questo caso, aggiungi l'intestazione Cache-Control: max-age=31536000.

Il modo più efficace per farlo è utilizzare un espressione regolare per vedere se l'asset richiesto corrisponde a un pattern specifico in cui ricadono gli hash. Nel caso di questo progetto di esempio, è sempre otto del set di cifre 0-9 e delle lettere minuscole a-f (ovvero esadecimali). L'hash è sempre separato da un carattere . su entrambi i lati.

Un'espressione regolare che corrisponda a queste regole generali può essere espresso come new RegExp('\\.[0-9a-f]{8}\\.').

• 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

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

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

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

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

• Con i DevTools aperti nel riquadro Rete, aggiorna la pagina.

Dopo che la pagina è stata caricata, nel riquadro Rete dovresti vedere le voci che sembrano ad esempio:

La prima riga è quella per il documento HTML che hai visualizzato. È corretto fornita con Cache-Control: no-cache. Lo stato della risposta HTTP per la richiesta è una 304. Questo significa che il browser non ha potuto usare immediatamente l'HTML memorizzato nella cache, ma ha inviato una richiesta HTTP al server web utilizzando Last-Modified e ETag informazioni per verificare la presenza di eventuali aggiornamenti al codice HTML già dalla propria cache. La risposta HTTP 304 indica che non è stato aggiornato HTML.

Le due righe successive riguardano gli asset JavaScript e CSS con controllo delle versioni. Dovresti vengono pubblicati 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 facendo clic sulla voce visualizzerai ulteriori dettagli, inclusa la risposta "(dalla cache del disco)".

I valori effettivi delle colonne ETag e Last-Change non sono molto importanti. La è importante verificare che siano impostati.

Riepilogo

Dopo aver seguito i passaggi di questo codelab, ora hai familiarità con le modalità di configurare le intestazioni delle risposte HTTP in un server web basato su Node.js utilizzando Express, per un uso ottimale della cache HTTP. Hai anche i passaggi da confermare venga utilizzato il comportamento previsto per la memorizzazione nella cache, tramite il riquadro Rete DevTools di Chrome.