Strategie buforowania offline: CacheFirst i NetworkFirst
Zaimplementuje Pan/Pani strategię Cache-First dla zasobów statycznych i Network-First dla odpowiedzi API, korzystając z Cache API oraz biblioteki Workbox.
Strategie buforowania offline: CacheFirst i NetworkFirst to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego strategie cache'owania mają znaczenie
Service workery mogą przechwytywać każde żądanie fetch — ale potrzebna jest odpowiednia strategia. Różne treści wymagają różnych reguł: logo powinno być przechowywane w cache bezterminowo, odpowiedź API powinna być zawsze aktualna, a artykuły informacyjne dobrze obsługuje strategia stale-while-revalidate.
Cache API
Service workery korzystają z Cache API: magazynu par klucz-wartość Request → Response, przypisanego do konkretnego originu. Dane są zachowywane między sesjami.
// open a cache:
const cache = await caches.open('v1');
// add resources:
await cache.add('/styles.css');
await cache.addAll(['/', '/app.js', '/styles.css']);
// look up:
const response = await cache.match('/styles.css');
// delete:
await cache.delete('/styles.css');Cache First
Najpierw należy sprawdzić cache. Jeśli zasób zostanie znaleziony, należy go zwrócić. Jeśli nie, należy użyć sieci i zapisać odpowiedź w cache. Najlepsze zastosowania: zasoby statyczne, czcionki, logotypy, powłoka aplikacji.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
if (cached) return cached;
return fetch(event.request).then(res => {
const clone = res.clone();
caches.open('v1').then(c => c.put(event.request, clone));
return res;
});
})
);
});Network First
Najpierw należy spróbować użyć sieci. Jeśli się to nie powiedzie (tryb offline), należy użyć cache. Najlepsze zastosowania: wywołania API i dynamiczne treści, w przypadku których aktualność jest ważniejsza od szybkości.
self.addEventListener('fetch', (event) => {
event.respondWith(
fetch(event.request).then(res => {
const clone = res.clone();
caches.open('api-v1').then(c => c.put(event.request, clone));
return res;
}).catch(() => caches.match(event.request))
);
});Stale While Revalidate
Cache należy zwrócić natychmiast (szybko), a następnie w tle pobrać dane i zaktualizować cache na przyszłość. Najlepsze zastosowania: awatary, artykuły informacyjne i dane częściowo aktualne.
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then(cached => {
const network = fetch(event.request).then(res => {
caches.open('v1').then(c => c.put(event.request, res.clone()));
return res;
});
return cached || network;
})
);
});Network Only
Całkowicie omija cache — zawsze korzysta z sieci. Należy używać tej strategii dla żądań, których nie można buforować (endpointy uwierzytelniania, analityka, mutacje).
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('/api/auth')) {
event.respondWith(fetch(event.request));
return;
}
// ... other strategies
});Cache Only
Nigdy nie korzysta z sieci — zwraca dane z cache albo kończy działanie błędem. Jest przydatna w przypadku plików zapisanych wcześniej w cache, których nie należy odświeżać podczas sesji.
Strategie Workbox
Workbox udostępnia wszystkie strategie jako nazwane klasy. Dzięki temu potrzeba mniej kodu szablonowego.
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies';
registerRoute(({ request }) => request.destination === 'image',
new CacheFirst({ cacheName: 'images' })
);
registerRoute(({ url }) => url.pathname.startsWith('/api/'),
new NetworkFirst({ cacheName: 'api', networkTimeoutSeconds: 3 })
);
registerRoute(({ request }) => request.destination === 'document',
new StaleWhileRevalidate({ cacheName: 'pages' })
);Wygasanie cache
Cache będzie rosnąć bez końca, jeśli nie zostaną ustawione limity. Workbox udostępnia ExpirationPlugin.
import { ExpirationPlugin } from 'workbox-expiration';
new CacheFirst({
cacheName: 'images',
plugins: [new ExpirationPlugin({
maxEntries: 50,
maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
})]
});Odpowiedzi możliwe do zapisania w cache
Domyślnie przeglądarki zapisują w cache tylko odpowiedzi 200. Należy pomijać odpowiedzi 4xx, 5xx i opaque (międzyoriginowe no-cors), aby nie zapełniać cache błędami.
Zapasowa strona offline
Gdy nawigacja się nie powiedzie, należy wyświetlić przyjazną stronę offline — zapewnia to lepsze wrażenia niż domyślny błąd przeglądarki.
self.addEventListener('install', (e) => {
e.waitUntil(caches.open('offline').then(c => c.add('/offline.html')));
});
self.addEventListener('fetch', (e) => {
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request).catch(() => caches.match('/offline.html'))
);
}
});Wybór właściwej strategii
Zasoby statyczne (logo, czcionka, CSS): Cache First. Dane API (profil użytkownika, kanał): Network First. Treści, które czasami powinny być aktualne (awატary, wiadomości): Stale While Revalidate. Uwierzytelnianie: Network Only. Wstępnie zainstalowane pliki statyczne: Cache Only.
Szybkie sprawdzenie
Jaka strategia cache'owania jest najlepsza dla pliku CSS, który rzadko się zmienia, ale musi ładować się szybko?
Podsumowanie: strategie cache'owania
Cache First: zasoby statyczne (najszybsza, ale dane mogą być nieaktualne). Network First: dane API (najbardziej aktualne, lecz wolniejsze). Stale While Revalidate: zwracanie danych z cache i pobieranie w tle. Network Only: uwierzytelnianie i mutacje. Cache Only: wstępnie zainstalowana powłoka. Workbox pozwala ograniczyć ilość kodu szablonowego. Należy ustawić limity wygasania. Należy dodać zapasową stronę offline. Strategię trzeba dobierać do rodzaju zasobu.
Często zadawane pytania
Czy lekcja „Strategie buforowania offline: CacheFirst i NetworkFirst” jest bezpłatna?
Tak — pełny tekst „Strategie buforowania offline: CacheFirst i NetworkFirst” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Strategie buforowania offline: CacheFirst i NetworkFirst”?
Zaimplementuje Pan/Pani strategię Cache-First dla zasobów statycznych i Network-First dla odpowiedzi API, korzystając z Cache API oraz biblioteki Workbox. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 offline: CacheFirst i NetworkFirst”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Manifest aplikacji internetowej
- Rejestracja i cykl życia Service Workera
- Strategie buforowania offline: CacheFirst i NetworkFirst
- Powiadomienia push