Wstępne buforowanie to jedna z najczęstszych czynności, które wykonuje się w skryptach service workbox. Zapewnia on dużą elastyczność wykonywania tego ważnego zadania niezależnie od tego, które z narzędzi do kompilacji w Workbox wybierzesz. Z tego przewodnika dowiesz się, jak wstępnie buforować zasoby za pomocą generateSW i injectManifest oraz które z tych metod mogą najlepiej sprawdzić się w Twoim projekcie.

Wstępne buforowanie za pomocą generateSW

generateSW to najprostszy sposób wstępnego buforowania zasobów w Workbox. Najważniejszą rzeczą, o której należy pamiętać w przypadku generateSW, jest to, że nie tworzysz własnego skryptu service workbox – prosisz Workbox o jego wygenerowanie. Możesz jednak wpłynąć na jego działanie za pomocą różnych opcji konfiguracyjnych.

generateSW domyślnie wykonuje różne działania w zależności od używanego narzędzia do kompilacji. Jeśli korzystasz z narzędzia workbox-webpack-plugin, nie musisz określać żadnych opcji konfiguracji. Domyślnie wtyczka wstępnie buforuje wszystko, co zawiera pakiet internetowy na swoim wykresie zależności, oraz zapisuje skrypt service worker o nazwie service-worker.js w katalogu określonym przez output.path

Jeśli używasz interfejsu workbox-build lub workbox-cli, w pamięci podręcznej domyślnie umieszczane są tylko zasoby HTML, CSS i JavaScript odczytywane z lokalnego systemu plików. W związku z konfiguracją musisz określić swDest oraz opcję globDirectory w generateSWkonfiguracji, aby wstępne zapisywanie w pamięci podręcznej działało. Być może zechcesz też skonfigurować dodatkowe opcje wpływające na działanie skryptu service worker, więc zapoznaj się z dokumentacją.

Wstępne buforowanie za pomocą injectManifest

Korzystanie z injectManifest nie jest tak łatwe jak używanie generateSW, ale prostota użytkowania nie jest taka sama jak korzystanie z usługi generateSW. Jeśli generateSW obsługuje za Ciebie całe generowanie skryptu service worker, injectManifest wykorzystuje napisany przez Ciebie skrypt service worker i wstawia listę adresów URL do wstępnego buforowania, pozostawiając resztę skryptu service worker bez zmian.

Jeśli używasz funkcji injectManifest, odpowiadasz za podłączenie logiki do wstępnego buforowania. Gdy injectManifest sprawdza wejściowy skrypt service worker, szuka specjalnej zmiennej self.__WB_MANIFEST i zastępuje ją plikiem manifestu precache. Jeśli ta zmienna nie będzie podana, injectManifest zwróci błąd.

Listę wpisów w pliku manifestu precache można dostosować za pomocą dodatkowych opcji konfiguracyjnych.

Porównanie

Kliknij każdą z kart poniżej, aby porównać użycie metod generateSW i injectManifest:

generateSW generuje skrypt service worker, więc wystarczy określić konfigurację. Poniżej znajdziesz przykład użycia właściwości workbox-build:

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

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

Skrypt service worker można następnie utworzyć w wierszu poleceń za pomocą Node:

node build-sw.js

injectManifest wymaga źródłowego skryptu usługi, więc z minimalnie realnym przykładem jest wymagany plik tego skryptu. Jeśli potrzebujesz jedynie wstępnego buforowania, wejściowy skrypt service worker może wyglądać mniej więcej tak:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(self.__WB_MANIFEST);

Zapisz ciąg self.__WB_MANIFEST. To obiekt zastępczy, który zastępuje Workbox plikiem manifestu precache. Poniżej znajdziesz prawidłową konfigurację dla tego przypadku użycia:

// build-sw.js
import {injectManifest} from 'workbox-build';

injectManifest({
  swSrc: './src/sw.js',
  swDest: './dist/sw.js',
  globDirectory: './dist',
  globPatterns: [
    '**/*.js',
    '**/*.css',
    '**/*.svg'
  ]
});

Usługa injectManifest jest zalecana w przypadku złożonych wymagań, takich jak zaawansowane routing, niestandardowe strategie buforowania lub inne kwestie, które nie są uwzględnione w opcjach dostępnych w generateSW.

Podsumowanie

Wstępne zapisywanie w pamięci podręcznej w Workbox jest znacznie łatwiejsze niż w przypadku, gdy musisz samodzielnie zarządzać takimi ustawieniami, zwłaszcza w przypadku zasobów wersji, które są kompilowane przez pakiety tworzące pakiety. Jednak wstępne buforowanie to nie jedyna rzecz, którą prawdopodobnie wykonuje się w skryptach service worker. Z kolei nauczysz się innych technik, takich jak buforowanie czasu działania.