Workbox: zestaw narzędzi do obsługi skryptów service worker wysokiego poziomu

Jeff Posnick

W tworzeniu niezawodnych aplikacji internetowych kluczową rolę odgrywają 2 interfejsy API: skrypt service worker i pamięć podręczna. Jednak ich skuteczne wykorzystanie – bez wprowadzania subtelnych błędów i napotykania przypadków skrajnych – może być wyzwaniem. Na przykład błędy w kodzie skryptu service worker mogą powodować problemy z pamięcią podręczną, przez co użytkownicy mogą widzieć nieaktualne treści lub uszkodzone linki.

Workbox to zaawansowany zestaw narzędzi skryptu service worker oparty na interfejsach Service Worker API i Cache Storage API. Zapewnia zestaw bibliotek gotowych do wykorzystania w środowisku produkcyjnym, które umożliwiają dodawanie obsługi offline do aplikacji internetowych. Zestaw narzędzi jest podzielony na 2 kolekcje: narzędzia, które pomagają zarządzać kodem uruchamianym w skrypcie service worker, oraz narzędzia, które integrują się z procesem kompilacji.

Kod środowiska wykonawczego

Jest to kod, który działa w skrypcie skryptu service worker i kontroluje sposób, w jaki przechwytuje on żądania wychodzące i wchodzi w interakcję z interfejsem Cache Storage API. Workbox ma kilkanaście modułów biblioteki, z których każdy obsługuje różne specjalistyczne przypadki użycia. Najważniejsze moduły określają, czy skrypt service worker odpowie (jest to tzw. routing) i jak odpowie (jest to tzw. strategia buforowania).

Tworzenie integracji

Workbox oferuje narzędzia wiersza poleceń, modułu Node.js i wtyczki webpack, które umożliwiają wykonanie 2 czynności na różne sposoby:

  • Utwórz skrypt skryptu service worker na podstawie zestawu opcji konfiguracji. Wygenerowany skrypt service worker używa bibliotek środowiska wykonawczego Workbox „pod maską”, aby wprowadzić w życie skonfigurowane strategie buforowania.
  • Wygeneruj listę adresów URL, które powinny być „wstępnie zapisywane w pamięci podręcznej”, na podstawie konfigurowalnych wzorców, aby uwzględniać i wykluczać pliki generowane podczas procesu kompilacji.

Dlaczego warto używać Workbox?

Korzystanie z Workbox podczas tworzenia skryptu service worker jest opcjonalne – istnieje wiele przewodników, które opisują typowe strategie buforowania z perspektywy „czystego” skryptu service worker. Jeśli zdecydujesz się na korzystanie z Workbox, oto niektóre z jego zalet.

Zarządzanie pamięcią podręczną

Workbox obsługuje aktualizacje pamięci podręcznej, które są powiązane z procesem kompilacji, gdy używasz wstępnego buforowania, lub za pomocą konfigurowalnych zasad dotyczących rozmiaru i wieku, gdy używasz buforowania w czasie działania. Podstawowy interfejs Cache Storage API jest zaawansowany, ale nie ma wbudowanej obsługi wygasania pamięci podręcznej. Narzędzia takie jak Workbox wypełniają tę lukę.

rozbudowane logowanie i raportowanie błędów;

Gdy zaczynasz pracę ze skryptami service worker, ustalenie, dlaczego coś jest zapisywane w pamięci podręcznej (lub, co jest równie frustrujące, dlaczego nie jest), może być wyzwaniem. Workbox automatycznie wykrywa, kiedy uruchamiasz wersję deweloperską witryny na localhost, i włącza logowanie debugowania w konsoli JavaScript przeglądarki.

Logowanie Workbox w konsoli Narzędzi deweloperskich

Dzięki komunikatom logu możesz znacznie szybciej znaleźć przyczynę problemów z konfiguracją lub unieważnieniem, niż gdybyś robił to samodzielnie.

przetestowaną bazę kodu działającą w różnych przeglądarkach;

Workbox jest rozwijany w oparciu o zestaw testów dla różnych przeglądarek i w miarę możliwości automatycznie przełącza się na alternatywne implementacje funkcji, których brakuje w niektórych przeglądarkach.

Jak używać Workbox?

Integracja platformy

Jeśli zaczynasz nowy projekt od zera, możesz skorzystać z integracji Workbox, którą znajdziesz w wielu popularnych zestawach startowych i dodatkach:

Dodawanie Workbox do istniejącego procesu kompilacji

Jeśli masz już skonfigurowany proces kompilacji witryny, do rozpoczęcia korzystania z Workbox może wystarczyć dodanie odpowiedniego narzędzia wiersza poleceń, modułu Node.js lub wtyczki webpack.

W szczególności interfejs wiersza poleceń Workbox ułatwia rozpoczęcie pracy, ponieważ zawiera tryb wizard, który sprawdza lokalne środowisko programistyczne i sugeruje rozsądną konfigurację domyślną, której można używać w przyszłości:

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 w ramach procesu kompilacji. Szczegóły znajdziesz w dokumentacji systemu generateSW. Możesz dodatkowo dostosować skrypt service worker, wprowadzając zmiany w pliku workbox-config.js. Szczegółowe informacje znajdziesz w dokumentacji opcji.

Używanie Workbox w czasie działania w istniejącym skrypcie service worker

Jeśli masz już skrypt service worker i chcesz wypróbować biblioteki środowiska wykonawczego Workbox, zaimportuj Workbox z oficjalnej sieci CDN i od razu zacznij używać go do buforowania w środowisku wykonawczym. W tym przypadku nie będzie można korzystać z wstępnego buforowania (które wymaga integracji w czasie kompilacji), ale jest to świetne rozwiązanie do prototypowania i testowania różnych strategii buforowania na bieżąco.

// 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',
  })
);