Praca z skryptami service worker

Jeff Posnick

To ćwiczenie z programowania pokazuje, jak zarejestrować pracownika usługi w aplikacji internetowej i obserwować jego działanie za pomocą Narzędzi deweloperskich w Chrome. Znajdziesz w nim też informacje o kilku technikach debugowania, które mogą Ci się przydać podczas kontaktowania się z pracownikami obsługi klienta.

Zapoznaj się z przykładowym projektem

Pliki w tym przykładowym projekcie, które są najbardziej przydatne w tym przypadku, to:

• register-sw.js jest pusty, ale będzie zawierać kod używany do rejestracji serwisu. Jest on już wczytywany za pomocą tagu <script> w projekcie index.html.
• service-worker.js jest podobnie pusty. To plik, który będzie zawierać instancję roboczą usługi w tym projekcie.

Dodawanie kodu rejestracji usługi

Skrypt service worker (nawet pusty, np. obecny plik service-worker.js) nie będzie używany, dopóki nie zostanie zarejestrowany. Możesz to zrobić, kontaktując się z naszymi zespołami:

navigator.serviceWorker.register(
  '/service-worker.js'
)

w pliku register-sw.js.

Zanim jednak dodasz kod, weź pod uwagę kilka kwestii.

Po pierwsze, nie każda przeglądarka obsługuje service workerów. Dotyczy to zwłaszcza starszych wersji przeglądarek, które nie aktualizują się automatycznie. Dlatego sprawdzoną metodą jest wywołanie funkcji navigator.serviceWorker.register() warunkowo, po sprawdzeniu, czy funkcja navigator.serviceWorker jest obsługiwana.

Po drugie, gdy zarejestrujesz pracownika usługi, przeglądarka uruchamia kod w pliku service-worker.js i może zacząć pobierać adresy URL, aby wypełnić pamięć podręczną, w zależności od kodu w install i activateobsługach zdarzeń pracownika usługi.

Uruchamianie dodatkowego kodu i pobieranie zasobów może zużywać cenne zasoby, których przeglądarka mogłaby użyć do wyświetlenia bieżącej strony internetowej. Aby uniknąć takich zakłóceń, warto opóźnić rejestrowanie service workera do czasu, gdy przeglądarka zakończy renderowanie bieżącej strony. Wygodnym sposobem na przybliżone określenie tego czasu jest oczekiwanie na zdarzenie window.load.

Biorąc pod uwagę te 2 punkty, dodaj do pliku register-sw.js kod rejestracji pracownika usługi ogólnego przeznaczenia:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

Dodaj kod rejestrowania usługi.

W pliku service-worker.js znajduje się cała logika implementacji usługi działającej w tle. Aby utworzyć idealnie dopasowaną usługę działającą w tle, która będzie gotowa do obsługi wszystkich żądań aplikacji internetowej, użyjesz kombinacji zdarzeń cyklu życia usługi działającej w tle, interfejsu Cache Storage API oraz wiedzy o ruchu sieciowym aplikacji internetowej.

Ale… to wszystko na później. Na tym etapie należy obserwować różne zdarzenia związane z usługami w tle i nauczyć się korzystać z narzędzi programistycznych Chrome do debugowania stanu usługi w tle.

W tym celu dodaj do pliku service-worker.js ten kod, który będzie rejestrować wiadomości w konsoli Narzędzi deweloperskich w odpowiedzi na różne zdarzenia (ale nie będzie wykonywać zbyt wielu innych działań):

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

self.addEventListener('activate', (event) => {
  console.log('Inside the activate handler:', event);
});

self.addEventListener(fetch, (event) => {
  console.log('Inside the fetch handler:', event);
});

Zapoznaj się z panelem skryptów service workera w Narzędziach deweloperskich

Po dodaniu kodu do plików register-sw.js i service-worker.js możesz przejść do wersji produkcyjnej przykładowego projektu i obserwować działanie serwisu.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran .
• Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
• Kliknij kartę Konsola.

Powinny pojawić się komunikaty dziennika podobne do tych poniżej, co oznacza, że usługa została zainstalowana i aktywowana:

Następnie otwórz kartę Aplikacje i kliknij panel Service Workers. Powinien pojawić się ekran podobny do tego:

Oznacza to, że w przypadku aplikacji internetowej solar-donkey.glitch.me istnieje usługa wtyczki o źródłowym adresie URL service-worker.js, która jest obecnie aktywna i działa. Widzisz też, że jest obecnie jeden klient (otwarta karta), którym steruje skrypt service worker.

Aby w celu debugowania wprowadzić zmiany w obecnie zarejestrowanym serwisie worker, możesz użyć linków w tym panelu, takich jak Unregister lub stop.

Uruchamianie procesu aktualizacji usługi:

Jedną z kluczowych koncepcji, którą należy zrozumieć podczas tworzenia za pomocą serwisowych workerów, jest przebieg aktualizacji.

Gdy użytkownicy odwiedzą aplikację internetową, która rejestruje usługę w tle, otrzymają kod bieżącej kopii service-worker.js zainstalowanej w ich lokalnej przeglądarce. Co się jednak stanie, gdy zaktualizujesz wersję pliku service-worker.js, która jest przechowywana na serwerze WWW?

Gdy powtarzający się użytkownik wróci do adresu URL, który jest obsługiwany przez pracownika usług, przeglądarka automatycznie poprosi o najnowszą wersję service-worker.js i sprawdzi, czy zaszły jakieś zmiany. Jeśli w skrypcie usługi jest coś innego, nowy serwis będzie mógł się zainstalować, aktywować i ostatecznie przejąć kontrolę.

Możesz symulować ten proces aktualizacji, wracając do edytora kodu projektu i wprowadzając w nim dowolną zmianę. Jedna z szybkich zmian to

self.addEventListener('install', (event) => {
  console.log('Inside the install handler:', event);
});

z

self.addEventListener('install', (event) => {
  console.log('Inside the UPDATED install handler:', event);
});

Po wprowadzeniu tej zmiany wróć do wersji aktywnej przykładowej aplikacji i ponownie załaduj stronę, gdy karta aplikacji w Narzędziach deweloperskich jest nadal otwarta. Powinien pojawić się ekran podobny do tego:

To pokazuje, że w tej chwili zainstalowane są 2 wersje Twojego serwisowego workera. Poprzednia wersja, która została już aktywowana, jest uruchomiona i kontroluje bieżącą stronę. Aktualna wersja usługi w tle znajduje się poniżej. Jest on w stanie waiting i będzie w nim do czasu, gdy wszystkie otwarte karty kontrolowane przez starego pracownika usługi zostaną zamknięte.

Dzięki temu, że nowy worker usługi różni się od poprzedniego, np. moduł obsługi fetch reaguje za pomocą zasobów, które są niezgodne ze starszymi wersjami Twojej aplikacji internetowej, nowy worker zacznie działać dopiero po wyłączeniu przez użytkownika wszystkich poprzednich wystąpień Twojej aplikacji internetowej.

Podsumowanie

Powinieneś już znać proces rejestrowania pracownika usług i obserwowania jego działania za pomocą DevTools w Chrome.

Teraz możesz zacząć wdrażać strategie buforowania i wszystkie inne przydatne rozwiązania, które pomogą Ci zapewnić niezawodne i szybkie wczytywanie aplikacji internetowej.