Praca z skryptami service worker

Jeff Posnick

Dzięki tym ćwiczeniom z programowania dowiesz się, jak zarejestrować skrypt service worker z poziomu aplikacji internetowej i za pomocą Narzędzi deweloperskich w Chrome obserwować jego działanie. Omówiono w nim również techniki debugowania, które mogą być przydatne w przypadku mechanizmów Service Worker.

Zapoznaj się z przykładowym projektem

Pliki w przykładowym projekcie najbardziej odpowiednie dla tego ćwiczenia z programowania to:

• Plik register-sw.js na początku jest pusty, ale będzie zawierał kod użyty do zarejestrowania skryptu service worker. Jest już ładowany przez tag <script> w elemencie index.html projektu.
• Pole service-worker.js jest podobnie puste. Będzie to plik, który będzie zawierał mechanizm Service Worker w tym projekcie.

Dodawanie kodu rejestracyjnego skryptu service worker

Skrypt service worker (nawet pusty, np. bieżący plik service-worker.js) nie będzie używany, chyba że zostanie wcześniej zarejestrowany. Możesz to zrobić przez połączenie telefoniczne:

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

w pliku register-sw.js.

Zanim jednak to zrobisz, musisz wziąć pod uwagę kilka kwestii.

Po pierwsze, nie każda przeglądarka obsługuje mechanizmy Service Worker. Dotyczy to zwłaszcza starszych wersji przeglądarek, które nie aktualizują się automatycznie. Dlatego warto warunkowo wywoływać metodę navigator.serviceWorker.register() po sprawdzeniu, czy funkcja navigator.serviceWorker jest obsługiwana.

Po drugie, gdy rejestrujesz skrypt service worker, przeglądarka uruchamia kod w pliku service-worker.js i może zacząć pobierać adresy URL w celu zapełnienia pamięci podręcznych w zależności od kodu zawartego w modułach obsługi zdarzeń install i activate tego skryptu.

Uruchomienie dodatkowego kodu i pobranie zasobów może zużywać cenne zasoby, które przeglądarka mogłaby wykorzystać do wyświetlenia bieżącej strony. Aby uniknąć tych zakłóceń, warto opóźnić zarejestrowanie skryptu service worker do momentu, w którym przeglądarka zakończy renderowanie bieżącej strony. Wygodnym sposobem na rozwiązanie tego problemu jest poczekanie na uruchomienie zdarzenia window.load.

Po połączeniu tych 2 elementów dodaj do pliku register-sw.js ten kod rejestracji uniwersalnego skryptu service worker:

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

Dodaj kod logowania skryptu service worker

Plik service-worker.js to miejsce, w którym normalnie znajduje się cała logika implementacji skryptu service worker. Użyjesz kombinacji zdarzeń cyklu życia skryptu service worker, interfejsu Cache Storage API oraz wiedzy o ruchu sieciowym Twojej aplikacji internetowej, aby stworzyć idealnie sprecyzowany skrypt service worker gotowy do obsługi wszystkich żądań aplikacji internetowej.

Ale... to wszystko na później. Na tym etapie skupiamy się na obserwowaniu różnych zdarzeń skryptu service worker i nauce korzystania z narzędzi deweloperskich w Chrome do debugowania stanu skryptu service worker.

W tym celu dodaj do service-worker.js ten kod, który będzie logował komunikaty w konsoli Narzędzi deweloperskich w odpowiedzi na różne zdarzenia (ale niezbyt wiele):

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 Service Workers w Narzędziach deweloperskich

Po dodaniu kodu do plików register-sw.js i service-worker.js przejdź do wersji opublikowanej przykładowego projektu i zobacz, jak działa skrypt service worker.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .
• Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
• Kliknij kartę Konsola.

Powinny wyświetlić się komunikaty dziennika podobne do tych poniżej, które wskazują, że skrypt service worker został zainstalowany i aktywowany:

Następnie otwórz kartę Applications (Aplikacje) i wybierz panel Service Workers. Powinna pojawić się informacja podobna do tej:

Dzięki temu wiesz, że istnieje skrypt service worker o źródłowym adresie URL service-worker.js dla aplikacji internetowej solar-donkey.glitch.me, która jest obecnie aktywna i uruchomiona. Informuje on też o tym, że obecnie jest jeden klient (otwarta karta), który jest sterowany przez skrypt service worker.

Korzystając z linków w tym panelu, takich jak Unregister lub stop, możesz wprowadzać zmiany w aktualnie zarejestrowanym skrypcie service worker na potrzeby debugowania.

Aktywowanie procesu aktualizacji skryptu service worker

Jedną z kluczowych koncepcji, które należy zrozumieć podczas programowania z użyciem skryptów service worker, jest proces aktualizacji.

Gdy użytkownicy otwierają aplikację internetową, która rejestruje skrypt service worker, użytkownikowi wyświetla się kod bieżącej kopii service-worker.js zainstalowanej w przeglądarce lokalnej. Co się jednak stanie, gdy zaktualizujesz wersję pliku service-worker.js, która jest przechowywana na Twoim serwerze WWW?

Gdy powracający użytkownik wraca pod adres URL należący do poziomu skryptu service worker, przeglądarka automatycznie wysyła żądanie najnowszej wersji service-worker.js i sprawdza, czy nie ma w niej żadnych zmian. Jeśli w skrypcie skryptu service worker coś się zmieni, nowy skrypt będzie miał możliwość zainstalowania i aktywowania, a dopiero potem przejmie kontrolę.

Aby zasymulować ten przepływ aktualizacji, wróć do edytora kodu w projekcie i wprowadź dowolne zmiany w kodzie. 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 aktywnej wersji przykładowej aplikacji i załaduj ponownie stronę z otwartą kartą aplikacji Narzędzia deweloperskie. Powinno pojawić się coś takiego:

Oznacza to, że w tym momencie są zainstalowane 2 wersje skryptu service worker. Poprzednia wersja, która została już aktywowana, działa i kontroluje bieżącą stronę. Zaktualizowana wersja skryptu service worker znajduje się poniżej. Jest w stanie waiting i będzie czekać, aż wszystkie otwarte karty kontrolowane przez stary mechanizm Service Worker zostaną zamknięte.

To domyślne działanie gwarantuje, że jeśli nowy skrypt service worker różni się zasadniczo od starego, np. modułem fetch, który odpowiada za pomocą zasobów niezgodnych ze starszymi wersjami Twojej aplikacji internetowej, nie zostanie ono zastosowane, dopóki użytkownik nie wyłączy wszystkich poprzednich instancji Twojej aplikacji internetowej.

Podsumowanie

Potrafisz już rejestrować skrypt service worker i obserwować jego zachowanie za pomocą Narzędzi deweloperskich w Chrome.

Możesz teraz zacząć wdrażać strategie buforowania i wszystkie inne funkcje, dzięki którym Twoja aplikacja internetowa będzie ładować się zarówno szybko, jak i niezawodnie.