JavaScript Academy · Lekcja

Rejestrowanie Service Workera

Proszę zainstalować i aktywować service workera.

Rejestrowanie Service Workera to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 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 Service Worker?

Service worker to skrypt uruchamiany przez przeglądarkę w tle, niezależnie od strony. Działa jak programowalny serwer proxy sieciowego: może przechwytywać żądania, zwracać odpowiedzi z pamięci podręcznej i umożliwiać pracę offline.

Wykrywanie funkcji

Nie każde środowisko obsługuje service workers. Przed rejestracją należy sprawdzić obecność navigator.serviceWorker, aby starsze przeglądarki mogły poprawnie działać w trybie ograniczonej funkcjonalności.

if ('serviceWorker' in navigator) {
  // safe to register
}

Rejestrowanie

Service worker rejestruje się, przekazując adres URL jego skryptu do navigator.serviceWorker.register. Funkcja zwraca obiekt Promise, który zostaje rozstrzygnięty obiektem rejestracji.

navigator.serviceWorker.register('/sw.js')
  .then(reg => console.log('registered, scope:', reg.scope))
  .catch(err => console.log('registration failed:', err));

Zakres rejestracji

Zakres to zbiór adresów URL kontrolowanych przez workera. Domyślnie jest nim katalog, w którym znajduje się skrypt. Worker w /sw.js kontroluje całą witrynę, natomiast worker w /app/sw.js kontroluje tylko /app/.

navigator.serviceWorker.register('/app/sw.js');
// Controls pages under /app/ only.

Ustawianie jawnego zakresu

Zakres można zawęzić za pomocą opcji, ale nie można go rozszerzyć poza katalog skryptu, chyba że serwer ustawi specjalny nagłówek.

navigator.serviceWorker.register('/sw.js', {
  scope: '/dashboard/'
});

Wymóg HTTPS

Service workers wymagają bezpiecznego kontekstu: w środowisku produkcyjnym jest nim HTTPS. Adres localhost jest uznawany za bezpieczny podczas tworzenia aplikacji. Zapobiega to przejęciu serwera proxy sieciowego przez osoby atakujące.

Zdarzenie install

Przy pierwszej rejestracji worker uruchamia zdarzenie install. Zwykle właśnie w tym miejscu wstępnie zapisuje się najważniejsze zasoby w pamięci podręcznej, aby aplikacja działała offline.

// sw.js
self.addEventListener('install', (event) => {
  console.log('service worker installing');
});

Zdarzenie activate

Po instalacji worker uruchamia zdarzenie activate. To odpowiednie miejsce na usunięcie starych pamięci podręcznych z poprzednich wersji, zanim worker zacznie kontrolować strony.

// sw.js
self.addEventListener('activate', (event) => {
  console.log('service worker activated');
});

Cykl życia

Service worker przechodzi przez następujące stany:

installing — uruchamianie procedury obsługi instalacji
installed/waiting — gotowy i oczekujący na przejęcie kontroli
activating / activated — kontroluje już strony

Domyślnie nowy worker czeka z aktywacją do momentu zamknięcia starych stron.

Przechwytywanie żądań

Po aktywacji worker odbiera każde żądanie sieciowe z kontrolowanego zakresu za pośrednictwem zdarzenia fetch. Odpowiedź można zwrócić z pamięci podręcznej, z sieci albo połączyć oba źródła.

// sw.js
self.addEventListener('fetch', (event) => {
  // event.request describes the outgoing request
  console.log('intercepted', event.request.url);
});

Podsumowanie rejestracji

Rejestrowanie service workera obejmuje wykrycie obsługi funkcji, wywołanie register z adresem URL skryptu, uwzględnienie zakresu i wymogu HTTPS oraz obsługę zdarzeń install, activate i fetch wewnątrz skryptu workera.

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat rejestrowania service workera.

Podsumowanie

Dowiedział się Pan / Dowiedziała się Pani, jak rejestrować service workera:

Obsługę funkcji należy wykrywać za pomocą 'serviceWorker' in navigator.
register(url, { scope }) zwraca obiekt Promise.
Zakres domyślnie obejmuje katalog skryptu, a HTTPS jest wymagane.
W workerze należy obsłużyć zdarzenia install, activate i fetch.

Następnie Cache API.

Często zadawane pytania

Czy lekcja „Rejestrowanie Service Workera” jest bezpłatna?

Tak — pełny tekst „Rejestrowanie Service Workera” 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 „Rejestrowanie Service Workera”?

Proszę zainstalować i aktywować service workera. Ć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 1 z 4.

Ile czasu zajmuje lekcja „Rejestrowanie Service Workera”?

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