Praca z skryptami service worker

Jeff Posnick

To ćwiczenie w Codelabs pokazuje, jak zarejestrować skrypt service worker z poziomu witryny w aplikacji i korzystając z Narzędzi deweloperskich w Chrome, aby obserwować jej działanie. Dodatkowo kilka technik debugowania, które mogą być przydatne podczas mechanizmy Service Worker.

Zapoznaj się z przykładowym projektem

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

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

Dodaj kod rejestracji skryptu service worker

Skrypt service worker (nawet pusty, np. obecny plik service-worker.js) nie będzie używany, dopóki nie 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, weź pod uwagę kilka kwestii. koncie.

Po pierwsze, nie każda przeglądarka pomocy mechanizmy Service Worker. Dotyczy to zwłaszcza starszych wersji przeglądarek, nie są automatycznie aktualizowane. Sprawdzoną metodą jest więc navigator.serviceWorker.register() warunkowo po sprawdzeniu, czy navigator.serviceWorker jest obsługiwany.

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 obsługach install i activate.

Użycie dodatkowego kodu i pobieranie zasobów może zużywać dzięki którym przeglądarka może wyświetlić aktualne źródło stronę internetową. Aby uniknąć takich zakłóceń, warto opóźnić rejestrowania skryptu service worker do czasu, gdy przeglądarka zakończy renderowanie bieżącej stronie. Aby to w prosty sposób określić, poczekaj, aż Wywołano zdarzenie window.load.

Łącząc te 2 punkty, dodaj ten skrypt service worker ogólnego przeznaczenia. kod rejestracyjny do pliku register-sw.js:

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

Dodaj kod logowania skryptu service worker

Plik service-worker.js zawiera wszystkie funkcje logiczne skryptu service worker to normalne zastosowanie. Użyjesz mechanizmu Service Worker zdarzenia cyklu życia, Cache Storage API, i wiedzę o ruchu w sieci Twojej aplikacji internetowej skrypt service worker, który może obsłużyć wszystkie żądania Twojej aplikacji internetowej.

Ale to wszystko na później. Na tym etapie skupiamy się na obserwacji różne zdarzenia związane z skryptami service worker, a także nabrać wprawy w korzystaniu z Narzędzi deweloperskich w Chrome. w celu debugowania stanu skryptu service worker.

W tym celu dodaj do service-worker.js kod podany poniżej, który będzie rejestrował do konsoli Narzędzi deweloperskich w odpowiedzi na różne zdarzenia (ale niewiele w innym przypadku):

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

Kod został już dodany do stron register-sw.js i service-worker.js należy zapoznać się z wersją przykładową projektu na żywo i sprawdzić, jak działa mechanizm Service Worker.

• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. 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.

Powinny wyświetlić się informacje podobne do tych komunikatów logu: pokazujące, ż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:

Jest to sygnał, że istnieje skrypt service worker ze źródłowym adresem URL service-worker.js, w przypadku aplikacji internetowej solar-donkey.glitch.me to aktywowany i aktywny. Widoczna jest również informacja, że istnieje jeden klient (otwarty ), którą kontroluje skrypt service worker.

Za pomocą linków w tym panelu, takich jak Unregister lub stop, możesz: zmian do obecnie zarejestrowanego skryptu service worker na potrzeby debugowania.

Aktywowanie procesu aktualizacji skryptu service worker

Jednym z kluczowych pojęć związanych z programowaniem z wykorzystaniem mechanizmów Service Worker koncepcja

Gdy użytkownicy odwiedzą aplikację internetową, która rejestruje skrypt service worker, zakończy się ona prześlij kod bieżącej kopii aplikacji service-worker.js zainstalowanej na przeglądarki lokalnej. Ale co się stanie, gdy zaktualizujesz który jest przechowywany na serwerze WWW?

Gdy powracający użytkownik powraca na adres URL objęty działaniem skryptu service worker, przeglądarka automatycznie poprosi o najnowsze wersje service-worker.js i sprawdzić, czy nie nastąpiły zmiany. Jeśli cokolwiek w skrypcie skryptu service worker jest inne, nowy skrypt service worker będzie miał szansę zainstalować, aktywować i w końcu przejmują kontrolę.

Możesz symulować ten proces aktualizacji, wracając do edytora kodu projektu i wprowadzając w nim dowolną zmianę. Jedna krótka zmiana: aby zastąpić

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, odśwież stronę z otwartą kartą Aplikacja w Narzędziach deweloperskich. Zobaczysz, że Na przykład:

To pokazuje, że w tej lokalizacji są zainstalowane 2 wersje skryptu service worker . Poprzednia wersja, która była już aktywowana, jest uruchomiona i kontroluje bieżącą stronę. Na liście znajduje się zaktualizowana wersja skryptu service worker poniżej. Znajduje się w waiting stan, i poczeka, aż wszystkie otwarte karty kontrolowane przez stary skrypt service worker został zamknięty.

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.

Podsumowywanie rzeczy

Powinieneś już znać proces rejestrowania pracownika usług i obserwowania jego zachowania 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.