Konfigurowanie zachowania buforowania HTTP

Jeff Posnick

Aby kontynuować pracę z tym ćwiczeniem, otwórz tę stronę Glitch na drugiej karcie.

Uwaga: w tym samouczku używamy Narzędzi deweloperskich w Chrome. Pobierz Chrome, jeśli jeszcze jej nie masz.

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.

Uwaga: chociaż szczegółowe instrukcje są dostosowane do Express, ogólne zasady dotyczące wybierania prawidłowych nagłówków pamięci podręcznej mają zastosowanie do każdego środowiska serwera internetowego.

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 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 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.

Uwaga: w „prawdziwym świecie” proces przypisywania haszy i aktualizowania plików HTML w celu uwzględnienia odwołań do najnowszej wersji adresu URL byłby obsługiwany przez narzędzie do kompilacji, takie jak webpack. W ramach tego samouczka załóżmy, że hasze zostały wygenerowane w ramach procesu kompilacji, który już miał miejsce.

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-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.

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). 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}\\.').

Uwaga: aby uniknąć problemów w przyszłości, warto jak najdokładniej określić te zasady. Dopasowanie bardziej ogólne, np. sprawdzanie rozszerzenia pliku .js lub .css, może w przyszłości stanowić problem, jeśli dodasz do projektu dodatkowe komponenty JavaScript lub CSS bez wersji.

• 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

Uwaga: aby zapoznać się z panelem Sieć w Narzędziach deweloperskich w Chrome, wykonaj to ćwiczenie z programowania.

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 .

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

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:

Pierwszy wiersz dotyczy dokumentu HTML, do którego się przeszedłeś/przeszłaś. Dokument 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ż był w pamięci podręcznej, zaszły jakieś zmiany. Odpowiedź HTTP 304 wskazuje, że nie ma zaktualizowanego kodu HTML.

Uwaga: Cache-Control: no-cache nie oznacza „nigdy nie używano kopii w pamięci podręcznej”. Oznacza to „zawsze najpierw sprawdzaj na serwerze i używaj kopii z pamięci podręcznej, jeśli jest odpowiedź HTTP 304”.

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”.

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ą Express, 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.