Praca z skryptami service worker

Jeff Posnick

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak zarejestrować skrypt service worker w aplikacji internetowej i obserwować jego działanie za pomocą Narzędzi deweloperskich w Chrome. Omówimy też techniki debugowania, które mogą być przydatne podczas pracy z mechanizmami Service Worker.

Zapoznaj się z przykładowym projektem

Pliki w przykładowym projekcie, które najbardziej pasują do tego ćwiczenia z programowania, to:

• Początkowo register-sw.js będzie pusty, ale będzie zawierał kod użyty do zarejestrowania skryptu service worker. Jest już ładowana za pomocą tagu <script> w index.html projektu.
• service-worker.js jest podobnie pusty. Będzie to plik zawierający skrypcję service worker dla tego projektu.

Dodaj kod rejestracji skryptu service worker

Skrypt service worker (nawet pusty, np. bieżący plik service-worker.js) nie będzie używany, chyba że najpierw zostanie zarejestrowany. Mogą to zrobić, dzwoniąc pod numer:

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

w pliku register-sw.js.

Zanim jednak dodasz ten kod, 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. Najlepiej jest więc wywoływać funkcję navigator.serviceWorker.register() warunkowo po sprawdzeniu, czy funkcja navigator.serviceWorker jest obsługiwana.

Po drugie, gdy zarejestrujesz 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ęcznej, w zależności od kodu w modułach obsługi zdarzeń install i activate tego skryptu.

Użycie dodatkowego kodu i pobranie zasobów może zużywać cenne zasoby, które w innym wypadku przeglądarka mogłaby wykorzystać do wyświetlenia bieżącej strony. Aby uniknąć takich zakłóceń, warto opóźnić rejestrację skryptu service worker do momentu, gdy przeglądarka zakończy renderowanie bieżącej strony. Aby to zrobić w wygodny sposób, trzeba poczekać na wywołanie zdarzenia window.load.

Składając te 2 punkty, dodaj do pliku register-sw.js ten kod rejestracji instancji roboczej ogólnego przeznaczenia:

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

Dodaj kod logowania skryptu service worker

W pliku service-worker.js normalnie powinna znajdować się cała logika implementacji mechanizmu Service Worker. Użycie połączenia zdarzeń cyklu życia, interfejsu Cache Storage API i wiedzy o ruchu sieciowym aplikacji internetowej w celu utworzenia idealnie stworzonego mechanizmu Service Worker gotowego do obsługi wszystkich żądań Twojej aplikacji internetowej.

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

W tym celu dodaj do narzędzia service-worker.js ten kod, który będzie rejestrować komunikaty w konsoli Narzędzi deweloperskich w odpowiedzi na różne zdarzenia (ale w niewielkim stopniu inaczej):

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 Skrypty service worker w Narzędziach deweloperskich

Po dodaniu kodu do plików register-sw.js i service-worker.js możesz przejść do wersji opublikowanej wersji przykładowego projektu i zobaczyć, jak działa mechanizm Service Worker.

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

Powinien pojawić się podobny komunikat logu wskazujący, że skrypt service worker został zainstalowany i aktywowany:

Następnie otwórz kartę Applications (Aplikacje) i wybierz panel Service Workers. Strona powinna wyglądać mniej więcej tak:

Wiadomo, że istnieje skrypt service worker ze źródłowym adresem URL service-worker.js, który jest obecnie aktywny i uruchomiony dla aplikacji internetowej solar-donkey.glitch.me. Widać też, że istnieje obecnie 1 klient (otwarta karta), sterowany przez skrypt service worker.

Aby wprowadzić zmiany w obecnie zarejestrowanej usłudze service worker na potrzeby debugowania, możesz użyć linków w tym panelu, takich jak Unregister lub stop.

Aktywowanie procesu aktualizacji skryptu service worker

Jednym z kluczowych pojęć związanych z programowaniem z użyciem mechanizmów Service Worker jest koncepcja przepływu aktualizacji.

Gdy użytkownicy odwiedzą aplikację internetową, która rejestruje skrypt service worker, użytkownicy zobaczą kod bieżącej kopii aplikacji service-worker.js zainstalowanej w ich lokalnej przeglądarce. Co się jednak stanie, gdy zaktualizujesz wersję service-worker.js przechowywanej na serwerze WWW?

Gdy powracający użytkownik wróci pod adres URL, który jest w zakresie skryptu service worker, przeglądarka automatycznie pobierze najnowszą wersję service-worker.js i sprawdzi, czy nie nastąpiły zmiany. Jeśli cokolwiek w skrypcie service worker jest inne, nowy skrypt service worker będzie mógł zainstalować, aktywować i ostatecznie przejąć kontrolę.

Możesz zasymulować ten proces aktualizacji, wracając do edytora kodu projektu i wprowadzając 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 wersji aktywnej aplikacji i załaduj ponownie stronę z otwartą kartą aplikacji w Narzędziach deweloperskich. Strona powinna wyglądać mniej więcej tak:

To pokazuje, ż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 jest widoczna poniżej. Ma stan waiting i pozostanie w oczekiwaniu, aż wszystkie otwarte karty kontrolowane przez stary skrypt service worker 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 wystąpień Twojej aplikacji internetowej.

Podsumowywanie rzeczy

Teraz wiesz już, jak rejestrować skrypt service worker i obserwować jego zachowanie za pomocą Narzędzi deweloperskich 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.