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

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