Предварительное кэширование — одна из наиболее распространенных вещей, которые вы будете делать в сервис-воркере, и Workbox предлагает большую гибкость в том, как вы можете выполнить эту важную задачу, независимо от того, какой из инструментов сборки Workbox вы выберете. В этом руководстве вы узнаете, как предварительно кэшировать ресурсы с generateSW
и injectManifest
, а также какой из этих методов лучше всего подойдет для вашего проекта.
Предварительное кэширование с помощью generateSW
generateSW
— это самый простой способ предварительного кэширования ресурсов в Workbox. Самое важное, что следует помнить о generateSW
это то, что вы не пишете своего собственного сервис-воркера — вы просите Workbox сгенерировать его для вас. Однако вы можете влиять на его поведение с помощью различных параметров конфигурации.
generateSW
по умолчанию выполняет разные действия в зависимости от того, какой инструмент сборки вы используете. При использовании workbox-webpack-plugin
вам не нужно указывать какие-либо параметры конфигурации. По умолчанию плагин предварительно кэширует все, что веб-пакет включает в свой граф зависимостей , и записывает сервис-воркера с именем service-worker.js
в каталог, указанный в output.path
С другой стороны, если вы используете workbox-build
или workbox-cli
, по умолчанию будут предварительно кэшироваться только ресурсы HTML, CSS и JavaScript, считанные из локальной файловой системы. Что касается конфигурации, вам необходимо указать swDest
и опцию globDirectory
в generateSW
, чтобы предварительное кэширование работало. Скорее всего, вам захочется настроить дополнительные параметры, влияющие на поведение вашего сервис-воркера, поэтому просмотрите документацию.
Предварительное кэширование с помощью injectManifest
Использовать injectManifest
не так просто, как generateSW
, но вы жертвуете простотой использования ради большей гибкости. generateSW
обрабатывает за вас всю генерацию сервис-воркера, то injectManifest
принимает написанный вами сервис-воркер в качестве источника и внедряет список URL-адресов для предварительного кэширования, оставляя остальную часть вашего сервис-воркера как есть.
Когда вы используете injectManifest
, вы несете ответственность за подключение логики предварительного кэширования. Когда injectManifest
проверяет ваш работник службы ввода, он ищет специальную переменную self.__WB_MANIFEST
и заменяет ее манифестом предварительного кэширования. Если эта переменная отсутствует, injectManifest
выдаст ошибку.
Список записей в манифесте прекэша можно изменить с помощью дополнительных параметров конфигурации .
Параллельное сравнение
Нажмите на каждую из вкладок ниже, чтобы сравнить использование generateSW
и injectManifest
:
ПосколькуgenerateSW генерирует сервис generateSW
воркера, вам нужно только указать конфигурацию. Ниже приведен пример использования workbox-build
:
// build-sw.js
import {generateSW} from 'workbox-build';
generateSW({
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
Затем сервис-воркера можно создать в командной строке с помощью Node:
node build-sw.js
Поскольку для injectManifest
требуется рабочий файл исходной службы, для минимально жизнеспособного примера требуется рабочий файл исходной службы. Если все, что нужно, — это предварительное кэширование, этот работник службы ввода может выглядеть примерно так:
import {precacheAndRoute} from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);
Обратите внимание на строку self.__WB_MANIFEST
. Это заполнитель, который Workbox заменяет манифестом предварительного кэширования. Ниже приведена допустимая конфигурация для этого варианта использования:
// build-sw.js
import {injectManifest} from 'workbox-build';
injectManifest({
swSrc: './src/sw.js',
swDest: './dist/sw.js',
globDirectory: './dist',
globPatterns: [
'**/*.js',
'**/*.css',
'**/*.svg'
]
});
injectManifest
предпочтительнее, если у вас есть сложные требования, такие как расширенная маршрутизация, пользовательские стратегии кэширования или другие вещи, которые не покрываются опциями, предоставляемыми generateSW
.
Заключение
Предварительное кэширование в Workbox намного проще, чем если бы вам приходилось управлять предварительным кэшированием самостоятельно, особенно когда речь идет о версионных ресурсах, скомпилированных сборщиками. Однако предварительное кэширование — не единственное, чем вы, скорее всего, будете заниматься в сервис-воркере. По мере продвижения вы изучите другие методы, такие как кэширование во время выполнения.