HTTP-Caching-Verhalten konfigurieren

Jeff Posnick

Wenn du diesem Codelab folgen möchtest, öffne diesen Glitch in einem zweiten Tab.

Hinweis : In diesem Codelab werden die Chrome-Entwicklertools verwendet. Laden Sie Chrome herunter, falls Sie das noch nicht getan haben.

In diesem Codelab erfahren Sie, wie Sie die HTTP-Caching-Header ändern, die von einem Node.js-basierten Webserver zurückgegeben werden, auf dem das Express-Framework für die Bereitstellung ausgeführt wird. Außerdem erfahren Sie, wie Sie in den Chrome-Entwicklertools im Bereich „Netzwerk“ prüfen können, ob das erwartete Caching-Verhalten tatsächlich angewendet wird.

Hinweis : Die Anleitung bezieht sich zwar auf Express, die allgemeinen Grundsätze für die Auswahl der richtigen Caching-Header gelten jedoch auch für jede Webserverumgebung.

Mit dem Beispielprojekt vertraut machen

Mit den folgenden Schlüsseldateien arbeiten Sie im Beispielprojekt:

• server.js enthält den Node.js-Code, der den Inhalt der Webanwendung bereitstellt. Sie verwendet Express, um HTTP-Anfragen und -Antworten zu verarbeiten. express.static() wird insbesondere verwendet, um alle lokalen Dateien im öffentlichen Verzeichnis bereitzustellen, sodass die Dokumentation serve-static sich als nützlich erweisen wird.
• public/index.html ist der HTML-Code der Webanwendung. Wie die meisten HTML-Dateien enthält die URL keine Versionsinformationen.
• public/app.15261a07.js und public/style.391484cf.css sind die JavaScript- und CSS-Assets der Webanwendung. Die URLs dieser Dateien enthalten jeweils einen Hash, der ihrem Inhalt entspricht. Mit dem index.html wird erfasst, welche spezifische versionierte URL geladen werden soll.

Hinweis : In der Praxis würde das Zuweisen von Hashes und das Aktualisieren von HTML-Dateien, um Verweise auf die neueste versionierte URL aufzunehmen, von einem Build-Tool wie Webpack durchgeführt. Nehmen wir für dieses Codelab an, dass die Hashes im Rahmen eines bereits vorhandenen Build-Prozesses generiert wurden.

Caching-Header für unseren HTML-Code konfigurieren

Wenn du auf Anfragen für URLs antwortest, die keine Versionsinformationen enthalten, solltest du deinen Antwortnachrichten Cache-Control: no-cache hinzufügen. Außerdem wird empfohlen, einen von zwei zusätzlichen Antwortheadern festzulegen: entweder Last-Modified oder ETag. Das index.html fällt in diese Kategorie. Sie können dies in zwei Schritte unterteilen.

Zuerst werden die Header Last-Modified und ETag durch die Konfigurationsoptionen etag und lastModified gesteuert. Beide Optionen sind standardmäßig für alle HTTP-Antworten auf true festgelegt. In der aktuellen Konfiguration müssen Sie diese Option also nicht aktivieren. Sie können Ihre Konfiguration aber trotzdem explizit festlegen.

Außerdem müssen Sie den Cache-Control: no-cache-Header hinzufügen können, jedoch nur für Ihre HTML-Dokumente (in diesem Fall index.html). Die einfachste Möglichkeit, diesen Header bedingt festzulegen, besteht darin, einen benutzerdefinierten setHeaders function zu schreiben und darin zu prüfen, ob die eingehende Anfrage für ein HTML-Dokument bestimmt ist.

• Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.

Die statische Bereitstellungskonfiguration in server.js beginnt so:

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

• Wenn Sie die oben beschriebenen Änderungen vornehmen, sollte das Ergebnis ungefähr so aussehen:

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

Caching-Header für die URLs mit Versionsangabe konfigurieren

Wenn Sie auf Anfragen nach URLs antworten, die „fingerprint“ oder Versionsinformationen enthalten und deren Inhalte sich nie ändern sollen, fügen Sie Cache-Control: max-age=31536000 in Ihre Antworten ein. app.15261a07.js und style.391484cf.css fallen in diese Kategorie.

Auf der Grundlage des im letzten Schritt verwendeten setHeaders function können Sie zusätzliche Logik hinzufügen, um zu prüfen, ob eine Anfrage für eine versionierte URL bestimmt ist. Wenn ja, fügen Sie den Cache-Control: max-age=31536000-Header hinzu.

Die robusteste Methode hierfür ist die Verwendung eines regulären Ausdrucks. Damit lässt sich feststellen, ob das angeforderte Asset mit einem bestimmten Muster übereinstimmt, von dem Sie wissen, dass die Hashes enthalten sind. Im Beispielprojekt besteht es immer aus acht Zeichen aus der Zahlenreihe 0–9 und den Kleinbuchstaben a–f (d.h. Hexadezimalzeichen). Der Hash wird auf jeder Seite immer durch ein .-Zeichen getrennt.

Ein regulärer Ausdruck, der den allgemeinen Regeln entspricht, kann als new RegExp('\\.[0-9a-f]{8}\\.') ausgedrückt werden.

Hinweis : Formulieren Sie diese Regeln so genau wie möglich, um zukünftige Probleme zu vermeiden. Eine allgemeinere Übereinstimmung, z. B. die Suche nach der Dateiendung .js oder .css, kann später zum Problem werden, wenn Sie Ihrem Projekt zusätzliche, nicht versionierte JavaScript- oder CSS-Assets hinzufügen.

• Ändern Sie die Funktion setHeaders so, dass sie so aussieht:

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

Neues Verhalten mithilfe der Entwicklertools bestätigen

Hinweis : In diesem Codelab können Sie sich mit dem Bereich „Netzwerk“ in den Entwicklertools von Chrome vertraut machen.

Nachdem die Änderungen am statischen Dateiserver vorgenommen wurden, können Sie prüfen, ob die richtigen Header festgelegt werden. Rufen Sie dazu die Live-App bei geöffnetem Entwicklertools-Netzwerkbereich in der Vorschau auf.

• Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.

• Passen Sie die im Steuerfeld „Netzwerk“ angezeigten Spalten so an, dass sie die relevantesten Informationen enthalten. Klicken Sie dazu mit der rechten Maustaste in die Spaltenüberschrift:

Hier sind die Spalten Name, Status, Cache-Control, ETag und Last-Modified zu beachten.

• Aktualisieren Sie die Seite, während die Entwicklertools im Bereich „Netzwerk“ geöffnet sind.

Nachdem die Seite geladen wurde, sollten im Steuerfeld „Netzwerk“ Einträge wie die folgenden zu sehen sein:

Die erste Zeile bezieht sich auf das HTML-Dokument, zu dem Sie navigiert sind. Diese wird ordnungsgemäß mit Cache-Control: no-cache bereitgestellt. Der HTTP-Antwortstatus für diese Anfrage ist 304. Das bedeutet, dass der Browser den im Cache gespeicherten HTML-Code nicht sofort verwenden sollte, sondern stattdessen eine HTTP-Anfrage an den Webserver stellte. Dabei wurden die Informationen Last-Modified und ETag verwendet, um zu prüfen, ob der HTML-Code, der bereits im Cache vorhanden war, aktualisiert wurde. Die HTTP 304-Antwort gibt an, dass der HTML-Code nicht aktualisiert wurde.

Hinweis : Cache-Control: no-cache bedeutet nicht „Ich habe die im Cache gespeicherte Kopie noch nie verwendet“. Das bedeutet: „Warten Sie immer zuerst auf dem Server und verwenden Sie die im Cache gespeicherte Kopie, wenn eine HTTP 304-Antwort vorliegt.“

Die nächsten beiden Zeilen beziehen sich auf die versionierten JavaScript- und CSS-Assets. Sie sollten mit Cache-Control: max-age=31536000 bereitgestellt werden und der HTTP-Status für beide lautet 200. Aufgrund der verwendeten Konfiguration wird keine tatsächliche Anfrage an den Node.js-Server gesendet. Wenn Sie auf den Eintrag klicken, sehen Sie zusätzliche Details, darunter auch, dass die Antwort „(aus dem Festplatten-Cache)“ kam.

Die tatsächlichen Werte in den Spalten ETag und Last-Modified spielen keine große Rolle. Wichtig ist, zu überprüfen, ob sie festgelegt werden.

Zusammenfassung

Nachdem Sie die Schritte in diesem Codelab durchgegangen sind, wissen Sie jetzt, wie Sie die HTTP-Antwortheader in einem Node.js-basierten Webserver mithilfe von Express konfigurieren, um den HTTP-Cache optimal zu nutzen. Außerdem findest du in den Chrome-Entwicklertools im Bereich „Netzwerk“ die erforderlichen Schritte, um zu bestätigen, dass das erwartete Caching-Verhalten verwendet wird.