Rejestrowanie service workera z HTML

Service worker to plik JavaScript działający w tle, niezależnie od stron, który przechwytuje żądania sieciowe w swoim zakresie. Zapewnia obsługę offline, powiadomienia push, synchronizację w tle oraz szybsze ponowne ładowanie dzięki pamięci podręcznej.

Zarejestruj workera ze skryptu strony: navigator.serviceWorker.register("/sw.js"). Przeglądarka pobiera plik /sw.js, analizuje go, uruchamia jego zdarzenie install i zaczyna przechwytywać żądania w zakresie tej rejestracji.

Starsze przeglądarki nie obsługują service workerów. Zawsze najpierw wykrywaj obsługę funkcji za pomocą "serviceWorker" in navigator, zanim wywołasz register, ponieważ w przeglądarkach bez tego API wywołanie zgłosi wyjątek. Polyfillowanie nie jest możliwe — service workerów nie można uzupełnić polyfillem, ponieważ wymagają integracji na poziomie przeglądarki.

Zakres to prefiks ścieżki, nad którym worker sprawuje kontrolę. Domyślnie zakresem jest katalog, w którym znajduje się plik workera: /sw.js kontroluje wszystkie adresy URL pod /. Aby zarejestrować workera o głębszym zakresie z pliku znajdującego się w innej lokalizacji, ustaw opcję scope ORAZ udostępnij nagłówek Service-Worker-Allowed.

Umieść sw.js w katalogu głównym aplikacji (/sw.js), aby jego domyślny zakres obejmował całą witrynę. Głębsze ścieżki (/app/sw.js) ograniczają zakres do /app/ i jego podkatalogów, co rzadko jest pożądane.

Zarejestruj workera po załadowaniu strony, aby uniknąć konkurowania o przepustowość podczas krytycznego renderowania: window.addEventListener("load", () => navigator.serviceWorker.register("/sw.js")). Funkcje PWA zaczną działać przy kolejnych wizytach bez opóźniania pierwszej wizyty.

Przeglądarka automatycznie sprawdza, czy plik sw.js został zaktualizowany (zwykle co 24 godziny i przy większości ładowań stron). Jeśli zawartość pliku się zmieniła, nowy worker jest pobierany i instalowany, a następnie czeka w stanie „waiting”, aż wszystkie istniejące karty zostaną zamknięte — dopiero wtedy zostaje aktywowany.

registration.update() ręcznie uruchamia sprawdzanie aktualizacji. self.skipWaiting() w nowym pliku sw.js natychmiast aktywuje workera bez czekania na zamknięcie kart. Połącz te mechanizmy, aby zawsze uruchamiać najnowszą wersję workera, kosztem ponownego pobierania danych w trakcie sesji.

registration.unregister() usuwa workera. Jest to przydatne podczas tworzenia, jeśli wadliwy worker powoduje problemy z witryną. W Chrome DevTools sekcja Application → Service Workers udostępnia przycisk „Unregister” do tego samego celu podczas debugowania.

Rejestrowanie workera przez HTTP (bez HTTPS) kończy się niepowodzeniem bez wyraźnego komunikatu — service workery wymagają bezpiecznego źródła (HTTPS lub localhost w środowisku programistycznym). Jeśli rejestracja nie działa, sprawdź w konsoli komunikat „An SSL certificate error occurred”.

Worker nie ma dostępu do DOM. Aby przekazywać wiadomości, użyj navigator.serviceWorker.controller.postMessage() na stronie i self.addEventListener("message", handler) w workerze (oraz odwrotnie). Jest to przydatne przy unieważnianiu pamięci podręcznej, sprawdzaniu wersji i obsłudze niestandardowych zdarzeń.

Podczas pierwszej wizyty worker jest instalowany i zaczyna kontrolować strony dopiero po ich przeładowaniu. Aby przejąć kontrolę nad pierwszą nawigacją od razu, wywołaj self.clients.claim() w zdarzeniu activate — jest to przydatne w aplikacjach działających przede wszystkim offline.

Rejestruj service workery z poziomu JavaScriptu strony za pomocą navigator.serviceWorker.register("/sw.js") po wykryciu obsługi funkcji. Umieść sw.js w katalogu głównym aplikacji, aby objąć zakresem całą witrynę. Rejestruj workera podczas zdarzenia load, aby nie konkurował z krytycznym renderowaniem. Aktualizacje są sprawdzane automatycznie okresowo; wymuś je za pomocą registration.update lub skipWaiting. Wymagany jest HTTPS, aby zapobiec wstrzyknięciu złośliwego workera.