Konfigurowanie zachowania buforowania HTTP

Jeff Posnick

Z tego ćwiczenia w Codelabs dowiesz się, jak zmienić nagłówki buforowania HTTP zwracane przez serwer WWW oparty na Node.js przy użyciu platformy obsługującej Express. Dowiesz się też, jak sprawdzić, czy oczekiwane zachowanie buforowania faktycznie jest stosowane, korzystając z panelu Network (Sieć) w Narzędziach deweloperskich w Chrome.

Zapoznaj się z przykładowym projektem

Oto pliki kluczy, z którymi będziesz pracować w przykładowym projekcie:

• server.js zawiera kod Node.js, który udostępnia zawartość aplikacji internetowej. Do obsługi żądań i odpowiedzi HTTP używa opcji Ekspresowe. express.static() służy do udostępniania wszystkich plików lokalnych znajdujących się w katalogu publicznym, więc może Ci się przydać dokumentacja serve-static.
• public/index.html to kod HTML aplikacji internetowej. Podobnie jak większość plików HTML, adres URL nie zawiera żadnych informacji o wersjach.
• public/app.15261a07.js i public/style.391484cf.css to zasoby JavaScript i CSS aplikacji internetowej. Każdy z nich ma w adresie URL hashtag, który odpowiada zawartości. Element index.html odpowiada za śledzenie, które konkretne adresy URL z różnymi wersjami mają zostać wczytane.

Skonfiguruj nagłówki buforowania na potrzeby kodu HTML

Odpowiadając na prośby dotyczące adresów URL, które nie zawierają informacji o obsłudze wersji, pamiętaj, aby do wiadomości z odpowiedziami dodać atrybut Cache-Control: no-cache. Oprócz tego zalecamy ustawienie 1 z 2 dodatkowych nagłówków odpowiedzi: Last-Modified lub ETag. Do tej kategorii należy index.html. Ten proces można podzielić na 2 etapy.

Po pierwsze, nagłówki Last-Modified i ETag są kontrolowane przez opcje konfiguracji etag i lastModified. Obie te opcje domyślnie używają wartości true w przypadku wszystkich odpowiedzi HTTP, więc w obecnej konfiguracji nie musisz tego robić, aby takie działanie było możliwe. Mimo to możesz podać wyraźne informacje w swojej konfiguracji.

Po drugie, musisz mieć możliwość dodawania treści w nagłówku 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 wpisanie niestandardowego nagłówka setHeaders function, a potem sprawdzenie, czy przychodzące żądanie dotyczy dokumentu HTML.

• Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.

Konfiguracja statycznego wyświetlania w server.js zaczyna się tak:

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

• Po wprowadzeniu powyższych zmian 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 w przypadku adresów URL mających różne wersje

Odpowiadając na prośby o adresy URL, które zawierają „odcisk palca” lub informacje o wersji, dodaj do swoich odpowiedzi atrybut Cache-Control: max-age=31536000. Do tej kategorii należą app.15261a07.js oraz style.391484cf.css.

Na podstawie elementu setHeaders function użytego w ostatnim kroku możesz dodać dodatkowe funkcje logiczne, aby sprawdzić, czy dane żądanie dotyczy adresu URL z wersją, i w razie potrzeby dodać nagłówek Cache-Control: max-age=31536000.

Najlepszy sposób to użycie wyrażenia regularnego, które pozwala sprawdzić, czy żądany zasób pasuje do określonego wzorca, do którego pasują hasze. W tym przykładowym projekcie ma on zawsze 8 znaków z zestawu cyfr 0–9 oraz małe litery a–f (czyli znaki szesnastkowe). Hasz jest zawsze oddzielony znakiem . po obu stronach.

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

• Zmodyfikuj funkcję setHeaders, 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');
    }
  },
}));

Potwierdź nowy sposób działania za pomocą Narzędzi deweloperskich

Po wprowadzeniu zmian na statycznym serwerze plików możesz sprawdzić, czy ustawione są odpowiednie nagłówki, wyświetlając podgląd aktywnej aplikacji przy otwartym panelu Network Tools.

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

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

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

• Po otwarciu Narzędzia deweloperskiego w panelu Network (Sieć) odśwież stronę.

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

Pierwszy wiersz dotyczy wyświetlonego dokumentu HTML. Jest ona obsługiwana przez funkcję Cache-Control: no-cache. Odpowiedź HTTP ma stan 304. Oznacza to, że przeglądarka wiedziała, że nie wykorzystać kodu HTML z pamięci podręcznej, i zamiast tego wysłała żądanie HTTP do serwera WWW, korzystając z informacji Last-Modified i ETag, aby sprawdzić, czy w kodzie HTML pojawiła się jakaś aktualizacja, którą już znajdowała w pamięci podręcznej. Odpowiedź HTTP 304 oznacza, że kod HTML nie został zaktualizowany.

Kolejne 2 wiersze dotyczą zasobów JavaScript i CSS w różnych wersjach. Powinny być one udostępniane przez Cache-Control: max-age=31536000, a stan HTTP każdego z nich to 200. Dzięki zastosowanej konfiguracji do serwera Node.js nie jest wysyłane żadne żądanie, a kliknięcie wpisu powoduje wyświetlenie dodatkowych szczegółów, w tym informację, że odpowiedź pochodzi z „(z pamięci podręcznej dysku)”.

Rzeczywiste wartości w kolumnach ETag i Last-Modified nie mają dużego znaczenia. Ważne jest, żeby potwierdzić, że wszystko jest ustawione.

Podsumowanie

Po ukończeniu tych ćwiczeń w Codelabs wiesz już, jak skonfigurować nagłówki odpowiedzi HTTP na serwerze WWW opartym na Node.js za pomocą Express, aby zapewnić optymalne wykorzystanie pamięci podręcznej HTTP. Musisz też potwierdzić, że stosowane jest oczekiwane zachowanie buforowania, korzystając z panelu Network (Sieć) w Narzędziach deweloperskich w Chrome.