Skrzynka robocza: zestaw narzędzi Service Worker wysokiego poziomu

Jeff Posnick

Dwa interfejsy API odgrywają kluczową rolę w tworzeniu niezawodnych aplikacji internetowych: Skrypt service worker i Pamięć podręczna. Ale jak skutecznie je wykorzystywać – bez wprowadzania drobnych błędów czy najeżdżania na krawędzie może być sporym wyzwaniem. Błędy w kodzie skryptu service worker mogą powodować problemy z buforowaniem; użytkownikom mogą wyświetlać się nieaktualne treści .

Workbox jest usługą wysokiego poziomu zestaw narzędzi service worker bazujący na mechanizmach Service Worker i pamięci podręcznej API. Udostępnia on gotowy do wykorzystania w środowisku produkcyjnym zestaw bibliotek do dodawania obsługi offline aplikacji internetowych. Zestaw narzędzi składa się z 2 kolekcji: narzędzi do zarządzania kod działający w skrypcie service worker oraz narzędzia integrujące się procesu tworzenia aplikacji.

Kod środowiska wykonawczego

To kod, który działa w skrypcie service worker i steruje sposobem przechwytuje żądania wychodzące i wchodzi w interakcję z interfejsem Cache Storage API. Workbox ma około kilkanaście modułów biblioteki, które obsługują różne, specjalistyczne zastosowania. Najważniejsze moduły określać, czy skrypt service worker zareaguje (nazywany wyznaczanie tras), i jak zareaguje (nazywany strategii buforowania).

Integracja kompilacji

Oferty Workbox command line, Moduł Node.js, oraz wtyczka webpack które dają alternatywne sposoby osiągnięcia dwóch celów:

  • Utwórz skrypt service worker na podstawie zbioru konfiguracji . Wygenerowany skrypt service worker używa bibliotek środowiska wykonawczego Workbox „świetne funkcje” które pozwalają wdrożyć skonfigurowane strategie buforowania.
  • Wygeneruj listę adresów URL, które należy "precached", na podstawie możliwych do skonfigurowania wzorców uwzględniania i wykluczania wygenerowanych plików podczas tworzenia kampanii.

Dlaczego warto używać Workbox?

Użycie Workbox podczas tworzenia skryptu service worker jest opcjonalne. z przewodników, typowe strategie buforowania z „wanili” z perspektywy skryptu service worker. Jeśli zdecydujesz się na korzystanie z Workbox, Oto kilka zalet tego rozwiązania.

Zarządzanie pamięcią podręczną

Workbox obsługuje aktualizacje pamięci podręcznej, powiązane z procesem kompilacji, za pomocą wstępnego buforowania lub za pomocą konfigurowalnych zasad dotyczących rozmiaru i wieku podczas korzystania z środowiska wykonawczego buforowanie. Bazowy interfejs Cache Storage API jest wszechstronny, ale nie ma żadnych wbudowaną obsługę okresu wygaśnięcia pamięci podręcznej. Narzędzia takie jak Workbox wypełniają tę lukę.

Rozbudowane logowanie i raportowanie błędów

Rozpoczynasz pracę z mechanizmami Service Worker, aby dowiedzieć się, dlaczego jest buforowana (lub, co równie frustrujące, dlaczego jej nie jest w pamięci podręcznej) jest dużym wyzwaniem. Workbox automatycznie wykrywa, że korzystasz z deweloperskiej wersji w witrynie localhost i włącza logowanie debugowania w kodzie JavaScript w przeglądarce konsoli.

Logowanie obszaru roboczego do konsoli Narzędzi deweloperskich

Postępując zgodnie z komunikatami dziennika, możesz uzyskać dostęp do katalogu głównego problemów z konfiguracją i unieważnianiem. i jej samej.

Przetestowana baza kodu w różnych przeglądarkach

Workbox utworzono na potrzeby zestawu testów w wielu przeglądarkach i, jeśli to możliwe, automatycznie wraca do alternatywnych implementacji funkcji, w niektórych przeglądarkach.

Jak używać Workbox?

Integracja platformy

Jeśli rozpoczynasz nowy projekt od zera, możesz skorzystać z Integracja z Workbox, którą można znaleźć w wielu popularnych zestawach startowych i wtyczkach dodatkowych:

Dodawanie Workbox do istniejącego procesu kompilacji

Jeśli masz już wdrożony proces tworzenia witryny, odpowiednie command line, Moduł Node.js, lub wtyczka webpack może być wystarczające, aby zacząć korzystać z Workbox.

Interfejs wiersza poleceń Workbox ułatwia w uruchomionej wersji z trybem wizard, który sprawdza proces programowania lokalnego i zaproponuj rozsądną konfigurację domyślną, której możesz użyć do przodu:

workbox wizard
? What is the root of your web app (i.e. which directory do you deploy)? src/
? Which file types would you like to precache? css, js, html
? Where would you like your service worker file to be saved? build/sw.js
? Where would you like to save these configuration options? workbox-config.js

Aby utworzyć skrypt service worker, uruchom workbox generateSW workbox-config.js jako część procesu kompilacji. Więcej informacji znajdziesz w dokumentacji usługi generateSW. Możesz jeszcze bardziej dostosować skrypt service worker, wprowadzając zmiany w usłudze workbox-config.js. Więcej informacji znajdziesz w dokumentacji poszczególnych opcji.

Używaj Workbox w czasie działania w istniejącym środowisku service worker

Jeśli masz już skrypt service worker i chcesz wypróbować środowisko wykonawcze Workbox biblioteki, zaimportować aplikację Workbox z oficjalnej sieci CDN i od razu zacznij jej używać do buforowania środowiska wykonawczego. Zastosowanie oznacza, że nie można skorzystać z wstępnego buforowania (które wymaga integracji w czasie kompilacji), ale świetnie nadaje się do tworzenia prototypów i testowania różne strategie buforowania.

// Replace 3.6.3 with the current version number of Workbox.
importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('\.png$'),
  workbox.strategies.cacheFirst({
    cacheName: 'images-cache',
  })
);