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ściexpress.static()
służy do dostarczania wszystkich plików lokalnych w katalogu publicznym, więc dokumentacjaexpress.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
ipublic/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 .
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 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”.
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.