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 в процессе сборки, у вас есть три варианта:
-
workbox-cli
-
workbox-build
. инструмент командной строки. - Использование упаковщика (например,
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 гарантирует, что вы можете использовать его практически в любом проекте, независимо от его структуры или предпочтений в наборе инструментов. Все эти возможности позволят вам выполнить предварительное кэширование и кэширование во время выполнения с помощью нескольких методов, одновременно обеспечивая большую гибкость при создании сервисных работников с более продвинутыми функциями, когда это необходимо.