Konfigurowanie zachowania buforowania HTTP

Jeff Posnick

To ćwiczenie z programowania pokazuje, jak zmienić nagłówki buforowania HTTP zwracane przez serwer WWW oparty na Node.js, który korzysta z ramy przechowywania Express. Dowiesz się też, jak za pomocą panelu Sieć w Narzędziach deweloperskich w Chrome sprawdzić, czy oczekiwane zachowanie buforowania jest rzeczywiście stosowane.

Zapoznaj się z przykładowym projektem

Oto najważniejsze pliki, z których będziesz korzystać w tym przykładowym projekcie:

  • server.js zawiera kod Node.js, który obsługuje zawartość aplikacji internetowej. Do obsługi żądań i odpowiedzi HTTP używa Express. W szczególności express.static() służy do dostarczania wszystkich plików lokalnych w katalogu publicznym, więc dokumentacja express.static() może się przydać.serve-static
  • public/index.html to kod HTML aplikacji internetowej. Podobnie jak większość plików HTML, nie zawiera on żadnych informacji o wersji w adresie URL.
  • public/app.15261a07.js i public/style.391484cf.css to zasoby JavaScript i CSS aplikacji internetowej. Każdy z tych plików zawiera w adresie URL ciąg znaków odpowiadający jego zawartości. index.html jest odpowiedzialny za śledzenie, który konkretny adres URL wersji ma być wczytany.

Konfigurowanie nagłówków pamięci podręcznej dla kodu HTML

Odpowiadając na żądania dotyczące adresów URL, które nie zawierają informacji o wersji, dodaj Cache-Control: no-cache do wiadomości. Zalecamy też ustawienie jednego z tych 2 dodatkowych nagłówków odpowiedzi: Last-Modified lub ETag. Do tej kategorii należy index.html. Możesz to podzielić na 2 kroki.

Po pierwsze nagłówki Last-Modified i ETag są kontrolowane przez opcje konfiguracji etag i lastModified. Obie te opcje są domyślnie ustawione na true dla wszystkich odpowiedzi HTTP, więc w obecnej konfiguracji nie musisz wyrażać zgody na to działanie. W konfiguracji możesz jednak wyraźnie określić, czego dotyczy ta zasada.

Po drugie, musisz mieć możliwość dodania nagłówka Cache-Control: no-cache, ale tylko w przypadku dokumentów HTML (w tym przypadku index.html). Najprostszym sposobem na warunkowe ustawienie tego nagłówka jest napisanie niestandardowego nagłówka setHeaders function, w którym sprawdzić, czy przychodzące żądanie dotyczy dokumentu HTML.

  • Kliknij Remixuj do edycji, aby umożliwić edycję projektu.

Konfiguracja obsługi statycznej w wersji server.js wygląda tak:

app.use(express.static('public'));
  • Wprowadź opisane powyżej zmiany. Efekt powinien wyglądać tak:
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');
    }
  },
}));

Skonfiguruj nagłówki buforowania dla adresów URL z wersjami.

Odpowiadając na żądania dotyczące adresów URL, które zawierają „odcisk palca” lub informacje o wersjach, a których zawartość nigdy nie powinna się zmieniać, dodaj do odpowiedzi znak Cache-Control: max-age=31536000. Do tej kategorii należą app.15261a07.js i style.391484cf.css.

Na podstawie żądania setHeaders function użytego w ostatnim kroku możesz dodać dodatkową logikę, aby sprawdzić, czy dane żądanie dotyczy adresu URL z wersją, a jeśli tak, dodać nagłówek Cache-Control: max-age=31536000.

Najskuteczniejszym sposobem jest użycie wyrażenia regularnego, aby sprawdzić, czy żądany zasób pasuje do określonego wzoru, do którego należą hasze. W przypadku tego przykładowego projektu jest to zawsze 8 znaków z zestawu cyfr 0–9 i małych liter a–f (czyli znaków szesnastkowych). Hash jest zawsze oddzielony znakiem . po obu stronach.

Wyrażenie regularne, które pasuje do tych ogólnych reguł, może mieć postać new RegExp('\\.[0-9a-f]{8}\\.').

  • Zmień funkcję setHeaders tak, aby wyglądała tak:
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');
    }
  },
}));

Sprawdzanie nowego zachowania za pomocą Narzędzi deweloperskich

Po wprowadzeniu zmian na serwerze plików statycznych możesz sprawdzić, czy prawidłowe nagłówki są ustawione, wyświetlając podgląd aplikacji na żywo z otwartym panelem sieci w Narzędziach deweloperskich.

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.

  • Aby dostosować kolumny wyświetlane w panelu Sieć, tak aby zawierały najbardziej istotne informacje, kliknij prawym przyciskiem myszy nagłówek kolumny:

Konfigurowanie panelu Sieć w Narzędziach dla programistów.

W tym przypadku kolumny, na które należy zwrócić uwagę, to Name, Status, Cache-Control, ETag i Last-Modified.

  • Gdy panel Sieć jest otwarty w Narzędziach deweloperskich, odśwież stronę.

Po załadowaniu strony w panelu Sieć powinny pojawić się wpisy podobne do tych:

Kolumny panelu sieci

Pierwszy wiersz dotyczy dokumentu HTML, do którego się przeszedłeś/przeszłaś. Dokument ten jest prawidłowo dostarczony z Cache-Control: no-cache. Stan odpowiedzi HTTP dla tego żądania to 304. Oznacza to, że przeglądarka wiedziała, że nie powinna od razu używać HTML-a z pamięci podręcznej, ale wysłała żądanie HTTP do serwera internetowego, używając informacji Last-Modified i ETag, aby sprawdzić, czy w HTML-u, który już miał w pamięci podręcznej, zaszły jakieś zmiany. Odpowiedź HTTP 304 wskazuje, że nie ma zaktualizowanego kodu HTML.

Kolejne 2 wiersze dotyczą wersji zasobów JavaScript i CSS. Powinny one być wyświetlane z wartością Cache-Control: max-age=31536000, a ich kod stanu HTTP to 200. Z powodu używanej konfiguracji do serwera Node.js nie jest wysyłane żadne żądanie. Po kliknięciu wpisu zobaczysz dodatkowe informacje, w tym informację, że odpowiedź pochodzi „z pamięci podręcznej dysku”.

Stan odpowiedzi sieci: 200.

Rzeczywiste wartości w kolumnach ETag i Ostatnia modyfikacja nie mają większego znaczenia. Ważne jest, aby potwierdzić, że są one ustawiane.

Podsumowanie

Po wykonaniu czynności opisanych w tym laboratorium kodu wiesz już, jak skonfigurować nagłówki odpowiedzi HTTP na serwerze WWW opartym na Node.js za pomocą Expressa, aby optymalnie korzystać z pamięci podręcznej HTTP. Znajdziesz tu też instrukcje, jak sprawdzić w panelu Sieć w Narzędziach deweloperskich w Chrome, czy używane jest oczekiwane zachowanie buforowania.