Sposoby korzystania z Workbox

Oprogramowanie Workbox jest na tyle elastyczne, że pozwala na obsługę niemal każdego procesu tworzenia projektu. Oznacza to, że istnieje więcej niż jeden sposób korzystania z narzędzia Workbox, co pozwala wybrać odpowiednią integrację dla projektu. Niezależnie od tego, jak zintegrujesz się z Workbox, różne narzędzia oferują podobny interfejs API.

generateSW kontra injectManifest

Będziesz używać jednej z 2 podstawowych metod narzędzia Workbox do kompilacji: generateSW lub injectManifest. Wybór zależy od tego, ile potrzebujesz elastyczności. generateSW priorytetowo traktuje łatwość użytkowania i prostotę, ale kosztem elastyczności. Możesz zadeklarować zestaw opcji konfiguracyjnych, a w zamian otrzymujesz w pełni funkcjonalny mechanizm Service Worker.

injectManifest preferuje większą elastyczność, ale kosztem pewnej uproszczenia, ponieważ będziesz w stanie samodzielnie napisać kod skryptu service worker, a injectManifest udostępnia plik manifestu precache, którego można używać przez metody wstępnego buforowania w Workbox.

Kiedy używać funkcji generateSW

Tagu generateSW należy używać, jeśli:

  • Chcesz wstępnie buforować pliki powiązane z procesem kompilacji, w tym pliki, których adresy URL zawierają hasze, których możesz nie znać z wyprzedzeniem.
  • Możesz w prosty sposób skonfigurować przechowywanie w pamięci podręcznej środowiska wykonawczego za pomocą opcji generateSW.

Kiedy nie należy używać generateSW

Z drugiej strony nie używaj metody generateSW, jeśli:

  • Chcesz używać innych funkcji skryptu service worker (np. Web Push).
  • Potrzebujesz większej elastyczności, aby importować dodatkowe skrypty lub używać określonych modułów Workbox, aby dostosować mechanizm Service Worker do potrzeb aplikacji.

Kiedy używać funkcji injectManifest

Tagu injectManifest należy używać, jeśli:

  • Chcesz wstępnie zapisywać pliki w pamięci podręcznej, ale chcesz utworzyć własny skrypt service worker.
  • Masz złożone potrzeby związane z buforowaniem lub routingiem, których nie możesz wyrazić za pomocą opcji konfiguracyjnych generateSW
  • Chcesz użyć innych interfejsów API w mechanizmie Service Worker (np. Web Push).

injectManifest różni się od generateSW tym, że wymaga wskazania pliku źródłowego pliku skryptu service worker. W tym przepływie pracy źródłowy plik mechanizmu Service Worker musi zawierać specjalny ciąg znaków self.__WB_MANIFEST, aby element injectManifest mógł zastąpić go plikiem manifestu precache.

Kiedy nie należy używać injectManifest

Nie używaj właściwości injectManifest, jeśli:

  • Nie chcesz używać wstępnego buforowania w skrypcie service worker.
  • nasze wymagania dotyczące mechanizmu Service Worker są na tyle proste, że można je zrealizować w generateSW i dostępnych opcjach konfiguracji.
  • Priorytetowo traktujesz łatwość obsługi, a nie elastyczność.

Korzystanie z narzędzi Build w aplikacji Workbox

Jeśli szukasz niezależnego od platformy sposobu korzystania z Workbox w procesie kompilacji, masz 3 opcje:

  1. workbox-cli
  2. workbox-build narzędzia wiersza poleceń.
  3. korzystasz z usługi tworzenia pakietów (np. workbox-webpack-plugin).

Każde z tych narzędzi do kompilacji udostępnia tryb generateSW i injectManifest z podobnym zestawem opcji. Są to dobre opcje, gdy nie chcesz wiązać skryptu service worker opartego na Workbox z konkretną platformą. Aby dowiedzieć się, która z tych opcji jest dla Ciebie najlepsza, przyjrzyjmy się każdej z nich.

workbox-cli

Jeśli szukasz najniższej możliwej bariery wejścia z usługą Workbox, interfejs wiersza poleceń jest dla Ciebie:

npm install workbox-cli --save-dev

Aby zacząć korzystać z interfejsu wiersza poleceń, uruchom kreator za pomocą narzędzia npx workbox wizard. Kreator zada Ci kilka pytań, a odpowiedzi na nie zostaną użyte do skonfigurowania projektu za pomocą pliku workbox-config.js, który możesz dostosować do swoich potrzeb. Będzie to wyglądać mniej więcej tak:

// A config for `generateSW`
export default {
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
};

Po utworzeniu pliku konfiguracji interfejs wiersza poleceń może uruchomić za Ciebie metodę generateSW lub injectManifest. Tekst pomocy interfejsu wiersza poleceń zawiera więcej informacji i przykłady użycia.

workbox-build

Kod workbox-cli obejmuje kod modułu workbox-build. Można go też użyć bezpośrednio workbox-build. Jeśli korzystasz z metody workbox-build, zamiast określać opcje za pomocą pliku workbox-config.js, użyjesz metod generateSW lub injectManifest bezpośrednio w ramach skryptu węzła, przekazując podobny zestaw opcji:

// build-sw.mjs
import {generateSW} from 'workbox-build';

generateSW({
  globDirectory: 'dist/',
  globPatterns: [
    '**/*.{css,woff2,png,svg,jpg,js}'
  ],
  swDest: 'dist/sw.js'
});

W powyższym przykładzie workbox-build zapisze wygenerowany skrypt service worker w katalogu dist po uruchomieniu polecenia node build-sw.mjs.

Korzystanie z usługi tworzenia pakietów

Różne osoby tworzące pakiety mają własne wtyczki Workbox, ale jedyny taki pakiet oficjalnie obsługiwany przez zespół Workbox to webpack w ramach pakietu workbox-webpack-plugin. Podobnie jak workbox-cli i workbox-build, workbox-webpack-plugin uruchomi metody generateSW lub injectManifest, ale wtyczka będzie w nich używać wielkich liter jako GenerateSW lub InjectManifest. W przeciwnym razie zastosowanie jest podobne do workbox-build:

// webpack.config.js
import {GenerateSW} from 'workbox-webpack-plugin';

export default {
  // Other webpack config options omitted for brevity...
  plugins: [
    new GenerateSW({
      swDest: './dist/sw.js'
    })
  ]
};

Opcje przekazywane do GenerateSW lub InjectManifest nie są takie same jak generateSW czy injectManifest, ale elementy w znacznym stopniu się pokrywają. W szczególności nie musisz – ani nie – określać opcji globDirectory dla GenerateSW, ponieważ pakiet internetowy już wie, dokąd będą przypisywane zasoby produkcyjne.

Korzystanie z platformy

Wszystko, co omówiliśmy, dotyczy korzystania z aplikacji Workbox niezależnie od preferencji platformy. Można jednak używać aplikacji Workbox w określonej platformie, jeśli ułatwia to jej programowanie. Na przykład produkt create-react-app jest domyślnie dostarczany z Workbox. Różne platformy integracyjne z Workbox zostały opisane w dalszej części artykułu.

Warto zauważyć, że integracje z Workbox na poziomie platformy mogą ograniczać możliwości konfigurowania Workbox w oczekiwany sposób. W takich przypadkach zawsze możesz wrócić do omówionych tu metod.

Co zrobić, jeśli nie mam odpowiedniego procesu kompilacji?

W tym dokumencie zakładamy, że Twój projekt ma proces kompilacji, ale w rzeczywistości nie jest. W takiej sytuacji możesz używać aplikacji Workbox z modułem workbox-sw. Dzięki workbox-sw możesz wczytać środowisko wykonawcze Workbox z sieci CDN lub lokalnie oraz utworzyć własny skrypt service worker.

Podsumowanie

Elastyczność Workbox sprawia, że można jej używać w prawie każdym projekcie, niezależnie od ustawień platformy czy łańcucha narzędzi. Wszystkie te sposoby pozwalają na wykorzystanie kilku metod wstępnego buforowania i buforowania w czasie działania, a jednocześnie pozwalają na większą elastyczność tworzenia mechanizmów Service Worker z bardziej zaawansowanymi funkcjami.