Workbox

W miarę rozwoju aplikacji PWA utrzymanie mechanizmów Service Worker i pamięci podręcznej może stanowić wyzwanie. Workbox to zestaw bibliotek open source, które mogą Ci w tym pomóc. Zawiera on interfejsy API niskiego poziomu, takie jak Service Worker API i Cache Storage API, oraz udostępnia bardziej proste interfejsy dla programistów.

Może w tym pomóc m.in. dopasowywanie strategii buforowania do ścieżek (lub wzorców routingu), pracę ze strumieniami oraz korzystanie z takich funkcji jak synchronizacja w tle z odpowiednimi ustawieniami zastępczymi.

Pole Workbox ułatwia zarządzanie buforowaniem zasobów i potrzebami dotyczącymi wyświetlania. Jest to również biblioteka najczęściej używana przez mechanizmy Service Worker. Jest wykorzystywana przez 54% witryn mobilnych i jest używana w wielu narzędziach do tworzenia oraz interfejsach wiersza poleceń, m.in. w interfejsach wiersza poleceń Angular, Create-React-App i Vue. Większość bibliotek i platform, np. Next.js, zawiera wtyczki.

54_%

Witryny mobilne z skryptami service worker używają biblioteki Workbox

Uwaga: chociaż Workbox jest najpopularniejszym zestawem bibliotek do mechanizmów service worker w społeczności PWA, istnieją też inne rozwiązania, takie jak sw-tools i UpUp

.

Moduły Workbox

Pole robocze zawiera kilka bibliotek nazywanych wewnętrznie modułami poświęconymi innym aspektom zarządzania zasobami i zachowaniem skryptów service worker.

Moduły pola pracy działają w różnych kontekstach, na przykład:

• W kontekście skryptu service worker: importujesz potrzebne moduły i używasz ich z pliku skryptu service worker, aby ułatwić zarządzanie buforowaniem i udostępnianie plików przy użyciu różnych strategii.
• W głównym kontekście window: pomoc w rejestrowaniu skryptu service worker i komunikacji z nim
• W ramach systemu kompilacji: na przykład pakiet internetowy służący do tworzenia pliku manifestu zasobów, a nawet generowania całego skryptu service worker.

Niektóre popularne moduły to:

• Routowanie modułów roboczych: gdy skrypt service worker przechwytuje żądania, moduł kieruje te żądania do różnych funkcji, które zwracają odpowiedzi. Jest to implementacja modułu obsługi zdarzeń fetch jak wspomniano w rozdziale dotyczącym udostępniania.
• strategie_workbox: zestaw strategii buforowania w czasie działania, które obsługują odpowiadanie na żądania. Dostarczają informacje o pamięci podręcznej najpierw i nieaktualne podczas ponownej weryfikacji. Jest to implementacja różnych strategii wymienionych w rozdziale o obsłudze.
• wstępne buforowanie: to implementacja plików buforowania w module obsługi zdarzeń install w skrypcie service worker (nazywanym też zapisywaniem w pamięci podręcznej), jak wspomnieliśmy w rozdziale buforowania. Dzięki temu modułowi możesz łatwo buforować zbiór plików i wydajnie zarządzać aktualizacjami tych zasobów. O aktualizowaniu zasobów dowiesz się w rozdziale o aktualizacji.
• workbox-expiration: to wtyczka używana w połączeniu ze strategiami buforowania, aby usuwać żądania z pamięci podręcznej na podstawie liczby elementów w pamięci podręcznej lub wieku żądania. Pomaga zarządzać pamięciami podręcznymi oraz określa limity czasu i liczby elementów w każdej pamięci podręcznej.
• workbox-window: zbiór modułów przeznaczonych do uruchamiania w kontekście okna, czyli na stronach internetowych PWA. Możesz uprościć proces rejestracji i aktualizacji skryptu service worker oraz ułatwić komunikację między kodem uruchomionym w kontekście skryptu service worker i w kontekście okna.

Korzystanie z Workbox

Workbox udostępnia różne sposoby integracji z PWA. Możesz wybrać, który najlepiej pasuje do architektury Twojej aplikacji:

• Interfejs wiersza poleceń skrzynki roboczej: narzędzie wiersza poleceń, które generuje kompletny skrypt service worker, wstrzykuje plik manifestu precache lub kopiuje potrzebne pliki Workbox.
• Kompilacja skrzynki roboczej: moduł npm, który generuje kompletny skrypt service worker, wstrzykuje plik manifestu precache i kopiuje pliki Workbox. Ma ona być zintegrowana z Twoim własnym procesem kompilacji.
• workbox-sw: sposób wczytywania pakietów instancji roboczych Workbox z sieci CDN, która nie korzysta z procesu kompilacji.

Interfejs wiersza poleceń Workbox udostępnia kreator, który przeprowadzi Cię przez proces tworzenia skryptu service worker. Aby uruchomić kreatora, wpisz następujące polecenie w wierszu poleceń:

npx workbox-cli wizard

Buforowanie i udostępnianie przy użyciu Workbox

Powszechnym zastosowaniem Workbox jest używanie modułów routingu i strategii do buforowania i udostępniania plików.

Moduł strategie_tworzenia jednostek zawiera gotowe strategie buforowania omówione w rozdziałach Zasoby i dane oraz Wyświetlanie.

Moduł routingu modułów roboczych pomaga sortować przychodzące żądania do skryptu service worker i dopasowywać je do strategii lub funkcji buforowania, aby uzyskiwać odpowiedzi na te żądania.

Po dopasowaniu tras do strategii Workbox umożliwia też filtrowanie odpowiedzi za pomocą wtyczki workbox-cacheable-response, które są dodawane do pamięci podręcznej. Dzięki tej wtyczce możesz na przykład buforować tylko odpowiedzi, które nie zwróciły żadnych błędów.

Uwaga: chociaż Workbox jest rozpowszechniany jako moduły npm, same mechanizmy Service Workbox nie obsługują składni modułów ES w każdej przeglądarce, dlatego przed wdrożeniem warto skompilować ten przykładowy kod za pomocą usługi tworzenia pakietów.

W poniższym przykładowym kodzie zastosowano strategię „pamięć podręczna” (za pomocą modułu CacheFirst) do buforowania i udostępniania nawigacji na stronach.

import { registerRoute } from 'workbox-routing';
import { CacheFirst } from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

const pageStrategy = new CacheFirst({
  // Put all cached files in a cache named 'pages'
  cacheName: 'pages',
  plugins: [
    // Only requests that return with a 200 status are cached
    new CacheableResponsePlugin({
      statuses: [200],
    }),
  ],
});

Dzięki wtyczce możesz korzystać z pamięci podręcznej Workbox i cyklu rozwiązywania żądań. CacheableResponsePlugin służy tu tylko do buforowania żądań, które mają stan 200, co zapobiega zapisywaniu nieprawidłowych żądań w pamięci podręcznej.

Po utworzeniu strategii musisz zarejestrować trasę, aby z niej korzystać. Poniższy przykład wywołuje funkcję registerRoute(), przekazując do wywołania zwrotnego obiekt żądania. Jeśli request.mode ma wartość "navigate", używa strategii CacheFirst (tutaj pageStrategy) zdefiniowanej w poprzednim przykładowym kodzie.

// Cache page navigations (HTML) with a Cache First strategy
registerRoute( ({ request }) => request.mode === 'navigate',
  pageStrategy );

Więcej przykładów i sprawdzonych metod znajdziesz w dokumentacji Workbox.

Kreacja zastępcza offline

Moduł routingu ze skrzynką roboczą również ma wyeksportowany atrybut setCatchHandler(), który umożliwia obsługę tego modułu w przypadku wystąpienia błędu podczas trasy. Dzięki temu możesz skonfigurować zastępczą trasę offline, aby powiadomić użytkowników, że ich wybrana trasa jest obecnie niedostępna.

W tym przypadku kombinacja Workbox i interfejsu Cache Storage API pozwala utworzyć kreację zastępczą offline przy użyciu strategii opartej tylko na pamięci podręcznej. Najpierw w trakcie cyklu instalacji skryptu service worker pamięć podręczna offline-fallbacks jest otwierana, a tablica wartości zastępczych offline jest dodawana do pamięci podręcznej.

import { setCatchHandler } from 'workbox-routing';

// Warm the cache when the service worker installs
self.addEventListener('install', event => {
  const files = ['/offline.html']; // you can add more resources here
  event.waitUntil(
    self.caches.open('offline-fallbacks')
        .then(cache => cache.addAll(files))
  );
});

Następnie w setCatchHandler() określone jest miejsce docelowe żądania, które spowodowało błąd, i otwarta jest pamięć podręczna offline-fallbacks. Jeśli miejscem docelowym jest dokument, użytkownik otrzymuje treść kreacji zastępczej offline. Jeśli taki element nie istnieje lub miejsce docelowe nie jest dokumentem (takim jak obraz lub arkusz stylów), zwracana jest odpowiedź o błędzie. Wzór można rozszerzyć nie tylko o dokumenty, ale także na obrazy, filmy, czcionki i wszystko, co chcesz dodać jako kreację zastępczą offline.

// Respond with the fallback if a route throws an error
setCatchHandler(async (options) => {
  const destination = options.request.destination;
  const cache = await self.caches.open('offline-fallbacks');
  if (destination === 'document') {
    return (await cache.match('/offline.html')) || Response.error();
  }
  return Response.error();
});

Przepisy

Istnieje kilka wzorców routingu i pamięci podręcznej, takich jak nawigację NetworkFirst i reklamy zastępcze offline, na tyle często, że można je umieścić w przepisach wielokrotnego użytku. Zaznacz workbox-Recipes, ponieważ mogą one być pomocne, jeśli zawierają rozwiązania odpowiednie dla Twojej architektury. Zwykle są dostępne jako jeden wiersz kodu, który należy dodać do kodu skryptu service worker.

Buforowanie i aktualizowanie zasobów

Zapisywanie zasobów w pamięci podręcznej wiąże się również z ich aktualizowaniem. Workbox pomaga aktualizować zasoby w wybrany przez siebie sposób. Możesz na przykład zaktualizować je na serwerze lub poczekać na aktualizację aplikacji. Więcej informacji o aktualizowaniu znajdziesz w rozdziale o aktualizacji.

Baw się w Workbox

Możesz od razu zacząć korzystać z Workbox, korzystając z tych modułów z kodowania:

Wypróbuj: Praca z Workbox.

Zasoby

• Pierwsze kroki z Workbox
• Moduły pola roboczego
• Możliwości Workbox