JavaScript Academy · Lekcja

API Cache

Proszę przechowywać odpowiedzi w pamięci podręcznej i serwować je z niej.

API Cache to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 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.

Czym jest Cache API?

Cache API przechowuje pary żądanie/odpowiedź w nazwanych pamięciach podręcznych. Service workers używają go do udostępniania zasobów bez dostępu do sieci, co stanowi podstawę obsługi trybu offline.

Obiekt caches

Globalny obiekt caches (typu CacheStorage) zarządza wszystkimi nazwanymi pamięciami podręcznymi. Jest dostępny zarówno na stronach, jak i w service workerach.

// Available globally:
// caches.open(name)
// caches.match(request)
// caches.delete(name)
// caches.keys()

Otwieranie pamięci podręcznej

caches.open(name) zwraca obiekt Promise wskazujący pamięć podręczną o podanej nazwie, tworząc ją, jeśli jeszcze nie istnieje. Nazwy pozwalają wersjonować pamięci podręczne.

caches.open('static-v1').then(cache => {
  console.log('cache ready');
});

Wstępne buforowanie za pomocą addAll

Podczas zdarzenia install metoda cache.addAll(urls) pobiera i zapisuje listę zasobów w ramach jednego wywołania. Jeśli którekolwiek pobieranie się nie powiedzie, cała operacja zostanie odrzucona.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('static-v1').then(cache =>
      cache.addAll(['/', '/styles.css', '/app.js'])
    )
  );
});

waitUntil

event.waitUntil(promise) informuje przeglądarkę, aby utrzymywała workera przy życiu do czasu rozstrzygnięcia obiektu Promise. Należy umieścić w nim konfigurację pamięci podręcznej, aby instalacja nie zakończyła się zbyt wcześnie.

self.addEventListener('install', (event) => {
  event.waitUntil(setupCache());
});

Dodawanie jednego wpisu

cache.put(request, response) przechowuje pojedynczą odpowiedź, natomiast cache.add(url) pobiera i zapisuje jeden adres URL. Z put należy korzystać, gdy odpowiedź do zapisania jest już dostępna.

const cache = await caches.open('static-v1');
const response = await fetch('/logo.png');
await cache.put('/logo.png', response);

Wyszukiwanie w pamięci podręcznej

cache.match(request) wyszukuje zapisaną odpowiedź. Zwraca obiekt Promise rozstrzygany znalezioną odpowiedzią albo wartością undefined, jeśli nie ma dopasowania.

const cache = await caches.open('static-v1');
const hit = await cache.match('/styles.css');
if (hit) console.log('served from cache');

Skrót caches.match

caches.match(request) przeszukuje jednocześnie wszystkie pamięci podręczne. Jest to wygodne w procedurze obsługi zdarzenia fetch, gdy nie ma znaczenia, w której pamięci znajduje się zasób.

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then(hit =>
      hit || fetch(event.request)
    )
  );
});

respondWith

Wewnątrz zdarzenia fetch funkcja event.respondWith(promise) dostarcza odpowiedź używaną przez przeglądarkę. Obiekt Promise należy rozstrzygnąć obiektem Response pochodzącym z pamięci podręcznej lub świeżo pobranym z sieci.

self.addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

Klonowanie odpowiedzi

Treść odpowiedzi można odczytać tylko raz. Aby jednocześnie zwrócić odpowiedź i zapisać ją w pamięci podręcznej, należy najpierw ją sklonować.

const response = await fetch(request);
cache.put(request, response.clone()); // store a copy
return response; // return the original

Usuwanie wpisów z pamięci podręcznej

cache.delete(request) usuwa pojedynczy wpis, a caches.delete(name) usuwa całą nazwaną pamięć podręczną. Służą one do usuwania nieaktualnych zasobów.

await cache.delete('/old-asset.js');
await caches.delete('static-v0'); // remove old cache version

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat Cache API.

Podsumowanie

Dowiedział się Pan / Dowiedziała się Pani, jak korzystać z Cache API:

caches.open(name) pobiera nazwaną pamięć podręczną lub ją tworzy.
addAll wykonuje wstępne buforowanie, a put/add zapisują wpisy.
match pobiera wpis, a caches.match przeszukuje wszystkie pamięci podręczne.
respondWith dostarcza odpowiedź w obsłudze zdarzenia fetch.
Przed zapisaniem i zwróceniem odpowiedzi należy ją sklonować.

Następnie strategie buforowania.

Często zadawane pytania

Czy lekcja „API Cache” jest bezpłatna?

Tak — pełny tekst „API Cache” 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 „API Cache”?

Proszę przechowywać odpowiedzi w pamięci podręcznej i serwować je z niej. Ć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 2 z 4.

Ile czasu zajmuje lekcja „API Cache”?

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