JavaScript Academy · Lekcja

Strategie buforowania

Proszę stosować wzorce cache-first i network-first.

Strategie buforowania to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Dlaczego strategie mają znaczenie

Różne zasoby wymagają różnego postępowania. Logo można bezterminowo udostępniać z pamięci podręcznej, natomiast dane z API muszą być aktualne. Strategia buforowania określa, czy najpierw należy sprawdzić pamięć podręczną, czy sieć, oraz jak połączyć oba źródła.

Cache-first

Cache-first: należy sprawdzić pamięć podręczną, zwrócić znaleziony zasób, a w przeciwnym razie pobrać go z sieci. Ta strategia jest idealna dla statycznych, rzadko zmieniających się zasobów, takich jak czcionki, CSS i obrazy.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  return cached || fetch(request);
}

Cache-first z buforowaniem po użyciu

W przypadku braku zasobu w pamięci podręcznej można pobrać wynik i jednocześnie go zapisać, aby następne żądanie zostało obsłużone szybko. W ten sposób pamięć podręczna jest stopniowo uzupełniana podczas przeglądania aplikacji przez użytkowników.

async function cacheFirst(request) {
  const cached = await caches.match(request);
  if (cached) return cached;
  const fresh = await fetch(request);
  const cache = await caches.open('runtime');
  cache.put(request, fresh.clone());
  return fresh;
}

Network-first

Network-first: należy spróbować pobrać zasób z sieci, a jeśli się to powiedzie, użyć go i zapisać w pamięci podręcznej; w razie niepowodzenia, na przykład podczas pracy offline, należy użyć kopii z pamięci podręcznej. Ta strategia najlepiej sprawdza się w przypadku często aktualizowanych treści, takich jak wiadomości lub pulpity nawigacyjne.

async function networkFirst(request) {
  try {
    const fresh = await fetch(request);
    const cache = await caches.open('runtime');
    cache.put(request, fresh.clone());
    return fresh;
  } catch (err) {
    return caches.match(request);
  }
}

Stale-While-Revalidate

Stale-while-revalidate: natychmiast zwraca kopię z pamięci podręcznej, aby zapewnić szybkość, a jednocześnie w tle pobiera świeżą kopię i aktualizuje pamięć podręczną na przyszłość. To świetny kompromis między szybkością a aktualnością.

async function staleWhileRevalidate(request) {
  const cache = await caches.open('runtime');
  const cached = await cache.match(request);
  const network = fetch(request).then(res => {
    cache.put(request, res.clone());
    return res;
  });
  return cached || network;
}

Network-Only i Cache-Only

Dwie proste skrajności:

Network-only: zawsze pobiera dane z sieci i nigdy ich nie zapisuje w pamięci podręcznej (np. sygnały analityczne).
Cache-only: udostępnia wyłącznie zasoby zapisane wcześniej w pamięci podręcznej i nigdy nie korzysta z sieci (np. szkielet aplikacji).

// network-only:
// return fetch(request);
// cache-only:
// return caches.match(request);

Routing według typu żądania

Rzeczywiste aplikacje wybierają strategię dla każdego żądania. W module obsługi fetch należy sprawdzić request.url lub request.destination, a następnie odpowiednio skierować żądanie.

self.addEventListener('fetch', (event) => {
  const url = new URL(event.request.url);
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirst(event.request));
  } else {
    event.respondWith(cacheFirst(event.request));
  }
});

Obsługa trybu offline

Gdy żądanie nie trafi ani do sieci, ani do pamięci podręcznej, należy zwrócić przyjazną stronę trybu offline lub element zastępczy zamiast nieprawidłowej odpowiedzi.

async function withOfflineFallback(request) {
  return (await caches.match(request)) ||
         (await caches.match('/offline.html'));
}

Zapisywanie tylko pomyślnych odpowiedzi

Należy unikać zapisywania błędów w pamięci podręcznej. Przed zapisaniem sprawdź response.ok (lub status), aby błąd 404 albo 500 nie zanieczyścił pamięci podręcznej.

const fresh = await fetch(request);
if (fresh.ok) {
  cache.put(request, fresh.clone());
}
return fresh;

Wybór strategii

Dobierz strategię do rodzaju zawartości:

Zasoby statyczne: cache-first
Dane dynamiczne: network-first
Zawartość mieszana: stale-while-revalidate

Większość aplikacji łączy kilka strategii, kierując żądania według ich rodzaju.

Podsumowanie strategii

Strategie pamięci podręcznej pozwalają jednemu service workerowi inteligentnie obsługiwać całą aplikację: błyskawicznie udostępniać zasoby statyczne, zapewniać aktualne dane dynamiczne i elegancko obsługiwać tryb offline — wszystko z wyborem strategii dla każdego żądania.

Szybki test

Sprawdź swoją wiedzę na temat strategii pamięci podręcznej.

Podsumowanie

Poznałeś(-aś) strategie pamięci podręcznej:

Cache-first dla zasobów statycznych.
Network-first dla aktualnych danych dynamicznych.
Stale-while-revalidate dla połączenia szybkości i aktualności.
Kierowanie żądań na podstawie request.url/destination.
Zapisywanie wyłącznie pomyślnych odpowiedzi i udostępnianie zastępczej zawartości offline.

Następnie poznasz synchronizację w tle i aktualizowanie pamięci podręcznej.

Często zadawane pytania

Czy lekcja „Strategie buforowania” jest bezpłatna?

Tak — pełny tekst „Strategie buforowania” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Strategie buforowania”?

Proszę stosować wzorce cache-first i network-first. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Strategie buforowania”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy