Skrypt service worker – omówienie

Skrypty service worker są niezwykle przydatne, ale ich praca na początku może być trudna. Skrzynka robocza ułatwia korzystanie z mechanizmów Service Worker. Ponieważ jednak pracownicy usługowi rozwiązują trudne problemy, abstrakcja wykorzystania tej technologii będzie również trudna bez jej zrozumienia. Dlatego w kilku pierwszych fragmentach dokumentacji omówimy tę podstawową technologię, jeszcze zanim zagłębimy się w szczegóły Workbox.

Aby wyświetlić bieżącą listę skryptów service worker, wpisz chrome://serviceworker-internals/ na pasku adresu.

Aktywna lista skryptów service worker.

Co oferują mechanizmy Service Worker?

Skrypty service worker to specjalistyczne zasoby JavaScript, które działają jako serwery proxy między przeglądarkami a serwerami WWW. Ich celem jest zwiększenie niezawodności przez zapewnienie dostępu offline oraz zwiększenie wydajności stron.

Stopniowo ulepszający cykl życia przypominający aplikację

Skrypty service worker stanowią ulepszenie istniejących witryn. Oznacza to, że jeśli użytkownicy przeglądarek, które nie obsługują mechanizmów Service Worker, odwiedzają witryny, które z nich korzystają, żadna podstawowa funkcjonalność nie działa. Taki jest właśnie internet.

Mechanizmy Service Worker stopniowo ulepszają witryny, wykorzystując cykl życia podobny do aplikacji na konkretnej platformie. Zastanów się, co się dzieje, gdy aplikacja natywna zostanie zainstalowana ze sklepu z aplikacjami:

  • Wysyłane jest żądanie pobrania aplikacji.
  • Aplikacja zostanie pobrana i zainstalowana.
  • Aplikacja jest gotowa do użycia i można ją uruchomić.
  • Aplikacja jest aktualizowana o nowe wersje.

Cykl życia mechanizmów Service Worker jest podobny, ale z stopniowym ulepszeniem. Podczas pierwszej wizyty na stronie internetowej, na której instaluje się nowy skrypt service worker, pierwsza wizyta na stronie dostarcza podstawowych funkcji, podczas gdy skrypt service worker się pobiera. Po zainstalowaniu i aktywowaniu skryptu service worker kontroluje stronę, by zwiększyć niezawodność i szybkość.

Dostęp do opartego na języku JavaScript interfejsu API buforowania

Nieodłącznym aspektem technologii mechanizmów Service Worker jest interfejs Cache, który jest mechanizmem buforowania całkowicie odrębnym od pamięci podręcznej HTTP. Dostęp do interfejsu Cache można uzyskać w zakresie skryptu service worker lub w zakresie wątku głównego. Daje to ogromne możliwości interakcji z instancją Cache opartych na użytkownikach.

Na pamięć podręczną HTTP wpływają dyrektywy buforowania określone w nagłówkach HTTP, natomiast interfejs Cache można programować w języku JavaScript. Oznacza to, że odpowiedzi na żądania sieciowe w pamięci podręcznej mogą być oparte na dowolnej logice, która jest najlepsza w przypadku danej witryny. Na przykład:

  • Przechowuj zasoby statyczne w pamięci podręcznej przy pierwszym żądaniu ich i wyświetlaj z pamięci podręcznej tylko przy każdym kolejnym żądaniu.
  • Zapisuj znaczniki stron w pamięci podręcznej, ale serwuj je tylko w trybie offline.
  • Wyświetlaj nieaktualne odpowiedzi dla określonych zasobów z pamięci podręcznej, ale aktualizuj je z poziomu sieci w tle.
  • Możesz strumieniowo przesyłać częściowe treści z sieci i łączyć je z powłoką aplikacji z pamięci podręcznej, aby poprawić wrażenia wizualne.

Każda z tych pozycji jest przykładem strategii buforowania. Strategie buforowania umożliwiają obsługę offline i mogą zapewnić większą wydajność, unikając ponownej weryfikacji plików z długim czasem oczekiwania, uruchamiają się w pamięci podręcznej HTTP. Zanim zagłębisz się w Workbox, zaprezentujemy kilka strategii buforowania i kodu, dzięki którym działają.

Asynchroniczny interfejs API oparty na zdarzeniach

Przesyłanie danych przez sieć z natury odbywa się asynchronicznie. Wysłanie żądania zasobu, odpowiedź serwera na to żądanie i pobranie odpowiedzi wymaga czasu. Czas potrzebny na to zadanie jest różny i nieokreślony. Mechanizmy Service Worker obsługują tę asynchronię przez interfejs API oparty na zdarzeniach, używając wywołań zwrotnych dla zdarzeń takich jak:

Zdarzenia można rejestrować za pomocą dobrze znanego interfejsu API addEventListener. Wszystkie te zdarzenia mogą wchodzić w interakcje z interfejsem Cache. W szczególności dla zapewnienia oczekiwanej niezawodności i szybkości połączenia kluczowa jest możliwość uruchamiania wywołań zwrotnych podczas wysyłania żądań sieciowych.

Wykonywanie asynchronicznej pracy w języku JavaScript wiąże się z korzystaniem z obietnic. Ponieważ async i await obiecują również te funkcje, można użyć tych funkcji JavaScript do uproszczenia kodu skryptu service worker (i Workbox!) i zwiększenia wygody programistów.

Planowanie i zapisywanie w pamięci podręcznej środowiska wykonawczego

Interakcja między skryptem service worker a instancją Cache obejmuje 2 różne koncepcje związane z pamięcią podręczną: przekazywanie i buforowanie w czasie działania. Każdy z tych elementów stanowi podstawę korzyści, jakie może zapewnić skrypt service worker.

dołączanie do pamięci podręcznej to proces buforowania zasobów z wyprzedzeniem, zwykle podczas instalacji skryptu service worker. Dzięki wstępnemu buforowaniu kluczowe zasoby statyczne i materiały potrzebne do dostępu offline można pobrać i zapisać w instancji Cache. Ten rodzaj buforowania przyspiesza też wczytywanie kolejnych stron, które wymagają zasobów w pamięci podręcznej.

Buforowanie środowiska wykonawczego ma miejsce, gdy strategia buforowania jest stosowana do zasobów w odpowiedzi na ich żądania wysyłane z sieci w czasie działania. Ten rodzaj buforowania jest przydatny, ponieważ gwarantuje dostęp offline do stron i zasobów, które użytkownik już wcześniej odwiedził.

Te podejścia do korzystania z interfejsu Cache w skryptach service worker znacznie zwiększają wygodę użytkowników i zapewniają działanie charakterystyczne dla zwykłych stron internetowych.

Izolacja od wątku głównego

Stan wydajności JavaScriptu to stale zmieniające się wyzwanie dla witryn, a z perspektywy użytkowników zależy to od możliwości urządzenia oraz dostępu do szybkiego internetu. Im częściej jest używany JavaScript, tym trudniej jest tworzyć szybkie witryny, które będą atrakcyjne dla użytkowników.

Mechanizmy Service Worker są jak roboty internetowe, bo cała praca odbywa się we własnych wątkach. Oznacza to, że zadania skryptów service worker nie będą konkurować o uwagę z innymi zadaniami w wątku głównym. Mechanizmy Service Worker z założenia stawiają użytkownika na pierwszym miejscu.

Co dalej

Ta dokumentacja jest tylko ogólnym opisem. Jest jeszcze kilka kwestii do poruszenia na temat mechanizmów Service Worker, zanim omówię odpowiednie środowisko Workbox, ale możesz mieć pewność, że jeśli dobrze poznasz tę usługę, będzie ona łatwiejsza i bardziej produktywna.