Konfigurowanie zachowania buforowania HTTP

Z tego ćwiczenia w Codelabs dowiesz się, jak zmienić nagłówki buforowania HTTP zwracane przez serwer WWW oparty na Node.js, na którym działa platforma obsługi 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ę ze szczegółami przykładowego projektu

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

  • server.js zawiera kod Node.js, który wyświetla treści 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, adres URL nie zawiera informacji o wersji.
  • public/app.15261a07.jspublic/style.391484cf.css to zasoby JavaScript i CSS aplikacji internetowej. Każdy z tych plików zawiera w swoim adresie URL ciąg bajtó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 wersjach, dodaj Cache-Control: no-cache do swoich odpowiedzi. 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-ModifiedETag są kontrolowane przez opcje konfiguracji etaglastModified. 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. Możesz jednak to zrobić w sposób wyraźny w swojej konfiguracji.

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). Najłatwiejszym sposobem warunkowania tego nagłówka jest wpisanie niestandardowego tagu setHeaders function i sprawdzenie, czy żądanie przychodzące dotyczy dokumentu HTML.

  • Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.

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

W odpowiedzi na prośby o podanie adresów URL zawierających „odcisk cyfrowy” lub informacje o wersji, których zawartość nigdy nie powinna być zmieniana, dodawaj do swoich odpowiedzi parametr Cache-Control: max-age=31536000. Do tej kategorii należą app.15261a07.js i style.391484cf.css.

Na bazie właściwości setHeaders function użytej w ostatnim kroku możesz dodać funkcje logiczne sprawdzające, czy dane żądanie dotyczy adresu URL z różną wersją. Jeśli tak, dodaj nagłówek Cache-Control: max-age=31536000.

Najlepszym sposobem jest użycie wyrażenia regularnego, aby sprawdzić, czy żądany zasób pasuje do określonego wzorca, 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). Hasz jest zawsze rozdzielony 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 witryny, kliknij Wyświetl aplikację, a następnie naciśnij Pełny ekran pełny ekran.

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

Konfiguruję panel Sieć w Narzędziach deweloperskich.

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

  • Gdy panel Narzędzi deweloperskich jest otwarty na panelu Sieć, 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 został prawidłowo dostarczony do Cache-Control: no-cache. Stan odpowiedzi HTTP dla tego żądania to 304. Oznacza to, że przeglądarka nie od razu korzystała z kodu HTML zapisanego w pamięci podręcznej i wysłał żądanie HTTP do serwera WWW, używając informacji Last-Modified i ETag, aby sprawdzić, czy w kodzie HTML pojawiła się już jakaś aktualizacja. Odpowiedź HTTP 304 oznacza, że kod HTML nie został zaktualizowany.

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.