Предварительное кэширование с помощью Workbox

Предварительное кэширование — одна из наиболее распространенных вещей, которые вы будете делать в сервис-воркере, и 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 чтобы предварительное кэширование работало. Скорее всего, вам захочется настроить дополнительные параметры, влияющие на поведение вашего сервис-воркера, поэтому просмотрите документацию.

Предупреждение. Если слишком много ресурсов в вашем проекте предварительно кэшированы с настройками по умолчанию, используйте один из параметров glob, чтобы исключить ресурсы из generateSW . При использовании workbox-webpack-plugin обратитесь к документации GenerateSW плагина, чтобы узнать, как предотвратить предварительное кэширование нежелательных ресурсов, поскольку его конфигурация отличается от generateSW .

Предварительное кэширование с помощью injectManifest

Использовать injectManifest не так просто, generateSW , но вы жертвуете простотой использования ради большей гибкости. generateSW обрабатывает за вас всю генерацию сервис-воркера, то injectManifest принимает написанный вами сервис-воркер в качестве источника и внедряет список URL-адресов для предварительного кэширования, оставляя остальную часть вашего сервис-воркера как есть.

Когда вы используете injectManifest , вы несете ответственность за подключение логики предварительного кэширования. Когда injectManifest проверяет ваш работник службы ввода, он ищет специальную переменную self.__WB_MANIFEST и заменяет ее манифестом предварительного кэширования. Если эта переменная отсутствует, injectManifest выдаст ошибку.

Примечание. Если вам нужно изменить строку, которую ищет injectManifest на что-то отличное от self.__WB_MANIFEST , вы можете сделать это, указав параметр injectionPoint в его конфигурации.

Список записей в манифесте прекэша можно изменить с помощью дополнительных параметров конфигурации .

Внимание: в отличие generateSW , injectManifest не будет автоматически объединять среду выполнения Workbox! Чтобы узнать, как справиться с этим в случаях использования, основанных на injectManifest , посмотрите параллельное сравнение ниже.

Параллельное сравнение

Нажмите на каждую из вкладок ниже, чтобы сравнить использование generateSW и injectManifest :

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 .

Внимание: в приведенных выше примерах предполагается, что вы находитесь в среде Node, которая изначально поддерживает модули ES без этапа сборки. В версиях узла до версии 16 вам, возможно, придется установить флаг, чтобы включить поддержку модуля ES, или полагаться на семантику CommonJS, используя module.exports .

Заключение

Предварительное кэширование в Workbox намного проще, чем если бы вам приходилось управлять предварительным кэшированием самостоятельно, особенно когда речь идет о версионных ресурсах, скомпилированных сборщиками. Однако предварительное кэширование — не единственное, чем вы, скорее всего, будете заниматься в сервис-воркере. По мере продвижения вы изучите другие методы, такие как кэширование во время выполнения.