Strategie Service Worker
Cache-first, network-first i stale-while-revalidate — wybór strategii dla poszczególnych typów zasobów.
Strategie Service Worker to bezpłatna lekcja Vue 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 Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Przegląd strategii buforowania
Service worker przechwytuje żądania sieciowe i decyduje, czy obsłużyć je z pamięci podręcznej, z sieci, czy z obu źródeł. Workbox udostępnia cztery podstawowe strategie, z których każda pasuje do innego rodzaju zasobu.
CacheFirst
CacheFirst obsługuje żądania z pamięci podręcznej i korzysta z sieci tylko wtedy, gdy brakuje wpisu w pamięci podręcznej. Najlepiej sprawdza się w przypadku rzadko zmienianych zasobów z haszowanymi treściowo adresami URL, takich jak czcionki i obrazy.
// serve cached, fall back to network on missNetworkFirst
NetworkFirst najpierw próbuje użyć sieci, a następnie korzysta z pamięci podręcznej w trybie offline lub po przekroczeniu limitu czasu. Najlepiej sprawdza się w przypadku odpowiedzi API, gdy aktualność danych jest ważna, ale pożądany jest również dostęp offline.
// try network, fall back to cache when offlineStaleWhileRevalidate
StaleWhileRevalidate natychmiast zwraca kopię z pamięci podręcznej, zapewniając szybkość, a w tle pobiera świeżą kopię i aktualizuje nią pamięć podręczną. Ta strategia świetnie sprawdza się w przypadku bundli JavaScript i CSS.
// return cache now, update cache in backgroundNetworkOnly i CacheOnly
Dwie skrajne strategie: NetworkOnly zawsze pobiera dane z sieci i nie korzysta z buforowania, a CacheOnly obsługuje wyłącznie treści zapisane wcześniej w pamięci podręcznej. Należy ich używać w przypadku żądań POST, których nie można buforować, lub zasobów przeznaczonych wyłącznie do wcześniejszego buforowania.
Tablica runtimeCaching
W konfiguracji Workbox runtimeCaching jest tablicą reguł. Każda reguła dopasowuje adresy URL żądań i przypisuje strategię oraz nazwę pamięci podręcznej.
VitePWA({
workbox: {
runtimeCaching: [ /* rules */ ]
}
});Reguła urlPattern
Każda reguła zawiera urlPattern (wyrażenie regularne lub funkcję), handler (nazwę strategii) oraz options, takie jak nazwa pamięci podręcznej.
{
urlPattern: /\/api\//,
handler: "NetworkFirst",
options: { cacheName: "api-cache" }
}Buforowanie zasobów statycznych za pomocą CacheFirst
Należy dopasować obrazy i czcionki oraz obsługiwać je za pomocą CacheFirst, ponieważ ich adresy URL zawierające hash treści zmieniają się po zmianie pliku.
{
urlPattern: /\.(?:png|jpg|svg|woff2)$/,
handler: "CacheFirst",
options: { cacheName: "static-assets" }
}Buforowanie bundli JS za pomocą StaleWhileRevalidate
Należy natychmiast obsługiwać bundle skryptów i stylów z pamięci podręcznej, jednocześnie odświeżając je w tle.
{
urlPattern: /\.(?:js|css)$/,
handler: "StaleWhileRevalidate",
options: { cacheName: "assets" }
}Wtyczka wygaszania
Bez ograniczeń pamięci podręczne rosną bez końca. Opcja expiration ogranicza liczbę wpisów i ich maksymalny wiek, usuwając w pierwszej kolejności najstarsze wpisy.
options: {
cacheName: "api-cache",
expiration: {
maxEntries: 50,
maxAgeSeconds: 60 * 60 * 24
}
}Buforowanie nieprzezroczystych odpowiedzi
W przypadku odpowiedzi API z innych źródeł często należy dodać cacheableResponse z dozwolonymi statusami, aby zapisywane były tylko pomyślne odpowiedzi.
options: {
cacheableResponse: { statuses: [0, 200] }
}Szybkie sprawdzenie
Która strategia najlepiej pasuje do odpowiedzi API, które powinny być aktualne, ale dostępne również offline?
Podsumowanie
Strategie Workbox odpowiadają różnym typom zasobów: CacheFirst służy do zasobów statycznych, NetworkFirst do odpowiedzi API, a StaleWhileRevalidate do bundli JS i CSS. Należy zdefiniować je w tablicy runtimeCaching za pomocą elementów urlPattern, handler i options, takich jak wtyczka expiration ograniczająca rozmiar pamięci podręcznej.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Strategie Service Worker” jest bezpłatna?
Tak — pełny tekst „Strategie Service Worker” 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 Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Strategie Service Worker”?
Cache-first, network-first i stale-while-revalidate — wybór strategii dla poszczególnych typów zasobów. Ćwiczysz Vue 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ąć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue 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 „Strategie Service Worker”?
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 Vue Academy?
Tak. Każda lekcja Vue 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
- Konfiguracja vite-plugin-pwa
- Strategie Service Worker
- Obsługa trybu offline i synchronizacja w tle
- Powiadomienia push w Vue PWA