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ę ze szczegółami przykładowego projektu

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 pracownika usługi. 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ą. Może to nastąpić w zależności od kodu w obsługach install i activate.

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

W pliku service-worker.js znajduje się cała logika implementacji usługi pomocniczej. Aby utworzyć doskonale zaprojektowaną usługę pomocniczą, która będzie gotowa do obsługi wszystkich żądań aplikacji internetowej, użyjesz wydarzeń cyklu życia usługi pomocniczej, 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. Strona powinna wyglądać mniej więcej tak:

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. Widnieje też informacja, że obecnie jest 1 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 mieści się w zakresie działania pracownika usługi, 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ę. Jedną z szybkich zmian jest zastąpienie

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 aplikacji i załaduj ponownie stronę z otwartą kartą aplikacji w Narzędziach deweloperskich. Powinien pojawić się ekran podobny do tego:

To pokazuje, że w tej chwili zainstalowane są 2 wersje Twojego serwisowego workera. Poprzednia wersja, która była już aktywowana, jest uruchomiona i zarządza 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, aż wszystkie otwarte karty kontrolowane przez starego pracownika usługi zostaną zamknięte.

To domyślne działanie zapewnia, że jeśli nowy mechanizm Service Worker znacznie różni się od dotychczasowego (np. moduł obsługi fetch reaguje z zasobami niezgodnymi ze starszymi wersjami Twojej aplikacji internetowej), nie zacznie obowiązywać, dopóki użytkownik nie wyłączy wszystkich poprzednich instancji Twojej aplikacji internetowej.

Podsumowanie

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

Teraz możesz już zacząć wdrażać strategie buforowania oraz inne przydatne rozwiązania, które pomagają sprawnie i niezawodnie ładować aplikacje internetowe.