Способы Workbox

Workbox достаточно гибок, чтобы вместить процесс сборки практически любого проекта. Это означает, что существует несколько способов использования Workbox, что позволяет вам выбрать правильную интеграцию для вашего проекта. Независимо от того, как вы интегрируетесь с Workbox, различные инструменты предлагают одинаковый API.

generateSW против injectManifest

Вы будете полагаться на один из двух основных методов инструментов сборки Workbox: generateSW или injectManifest . Какой из них вам следует использовать, зависит от того, какая гибкость вам нужна. generateSW отдает приоритет простоте и простоте использования за счет гибкости, позволяя вам объявить набор опций конфигурации и взамен предоставляя вам полнофункциональный сервис-воркер.

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

Когда generateSW

Вам следует generateSW если:

  • Вы хотите предварительно кэшировать файлы, связанные с вашим процессом сборки, включая файлы, URL-адреса которых содержат хэши, о которых вы, возможно, не знаете заранее.
  • У вас есть простые потребности в кэшировании во время выполнения, которые можно настроить с помощью generateSW .

Когда не следует использовать generateSW

С другой стороны, вам не следует использовать generateSW если:

  • Вы хотите использовать другие функции сервис-воркера (например, Web Push ).
  • Вам нужна дополнительная гибкость для импорта дополнительных сценариев или использования определенных модулей Workbox для точной настройки вашего сервис-воркера в соответствии с потребностями вашего приложения.

Когда использовать injectManifest

Вам следует использовать injectManifest если:

  • Вы хотите предварительно кэшировать файлы, но хотите написать свой собственный сервис-воркер.
  • У вас есть сложные потребности в кэшировании или маршрутизации, которые невозможно выразить с помощью параметров generateSW .
  • Вы хотели бы использовать в своем сервис-воркере другие API (например, Web Push).

injectManifest отличается generateSW тем, что требует указания исходного рабочего файла службы. В этом рабочем процессе исходный рабочий файл службы должен содержать специальную строку self.__WB_MANIFEST , чтобы injectManifest мог заменить ее манифестом precache .

Когда не следует использовать injectManifest

Вам не следует использовать injectManifest если:

  • Вы не хотите использовать предварительное кэширование в своем сервисном работнике.
  • наши требования к сервис-воркерам достаточно просты, чтобы их можно было удовлетворить тем, что может generateSW и его параметры конфигурации.
  • Вы отдаете предпочтение простоте использования, а не гибкости.

Используйте инструменты сборки Workbox

Если вы ищете независимый от платформы способ использования Workbox в процессе сборки, у вас есть три варианта:

  1. workbox-cli
  2. workbox-build . инструмент командной строки.
  3. Использование упаковщика (например, workbox-webpack-plugin ).

Каждый из этих инструментов сборки предлагает generateSW и injectManifest со схожим набором параметров. Все это хороший выбор, если вы не хотите привязывать своего сервис-воркера на базе Workbox к определенной платформе. Чтобы понять, какой из этих вариантов подойдет лучше всего, давайте кратко рассмотрим каждый из них.

workbox-cli

Если вы ищете минимально возможный барьер для входа в Workbox, CLI для вас:

npm install workbox-cli --save-dev

Чтобы начать использовать CLI, запустите мастер с помощью npx workbox wizard . Мастер задаст несколько вопросов, и ответы на эти вопросы будут использованы для настройки проекта с помощью файла workbox-config.js , который вы сможете настроить в соответствии со своими потребностями. Это будет выглядеть примерно так:

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

После создания файла конфигурации CLI может запускать для вас generateSW или injectManifest . Текст справки CLI содержит дополнительную информацию и примеры использования.

workbox-build

workbox-cli — это оболочка модуля workbox-build , альтернативой является непосредственное использование workbox-build . При использовании workbox-build вместо указания параметров с помощью файла workbox-config.js вы будете использовать generateSW или injectManifest непосредственно как часть сценария Node, передавая аналогичный набор параметров:

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

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

В приведенном выше примере workbox-build запишет сгенерированный сервис-воркер в каталог dist при запуске команды node build-sw.mjs .

Использование упаковщика

Различные упаковщики имеют свои собственные плагины для Workbox, но единственный упаковщик, официально поддерживаемый командой Workbox, — это webpack через workbox-webpack-plugin . Подобно workbox-cli и workbox-build , workbox-webpack-plugin будет запускать generateSW или injectManifest , за исключением того, что плагин пишет имена этих методов с заглавной буквы как GenerateSW или InjectManifest . В остальном использование аналогично 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'
    })
  ]
};

Параметры, которые вы передаете GenerateSW или InjectManifest не совпадают с generateSW или injectManifest , но они существенно совпадают. В частности, вам не нужно (и вы не можете ) указывать параметр globDirectory для GenerateSW поскольку веб-пакет уже знает, куда упакованы ваши производственные ресурсы.

Используйте фреймворк

Все, что описано в этом пункте, сосредоточено на использовании Workbox независимо от предпочтений фреймворка. Однако Workbox можно использовать в конкретной среде, если это упрощает разработку. Например, create-react-app по умолчанию поставляется с Workbox . Различные интеграции фреймворка с Workbox рассматриваются далее в следующей статье .

Стоит отметить, что эта интеграция Workbox, специфичная для платформы, может ограничить ваши возможности настраивать Workbox так, как вы хотите. В подобных случаях вы всегда можете вернуться к методам, обсуждаемым здесь.

Что делать, если у меня нет процесса сборки?

В этом документе предполагается, что в вашем проекте есть процесс сборки, но на самом деле его может не быть. Если это описывает вашу ситуацию, Workbox по-прежнему можно использовать с модулем workbox-sw . С помощью workbox-sw вы можете загрузить среду выполнения Workbox из CDN или локально и создать свой собственный сервис-воркер.

Заключение

Гибкость Workbox гарантирует, что вы можете использовать его практически в любом проекте, независимо от его структуры или предпочтений в наборе инструментов. Все эти возможности позволят вам выполнить предварительное кэширование и кэширование во время выполнения с помощью нескольких методов, одновременно обеспечивая большую гибкость при создании сервисных работников с более продвинутыми функциями, когда это необходимо.