Workbox 非常灵活，几乎可以适应任何项目的构建流程。这意味着，Workbox 的使用方式不止一种，您可以为项目选择合适的集成。无论您以何种方式与 Workbox 集成，各种工具都提供类似的 API。
generateSW 与 injectManifest
您将使用 Workbox 构建工具的两个核心方法之一：generateSW 或 injectManifest。您应该使用哪一种方法取决于您需要多大的灵活性。generateSW 以灵活性和易用性为先，允许您声明一组配置选项，并为您提供功能完善的 Service Worker。
injectManifest 更注重灵活性，但代价是一些简单性，因为最终您将自行为 Service Worker 编写代码，其中 injectManifest 提供了可供 Workbox 的预缓存方法使用的预缓存清单。
何时使用 generateSW
在以下情况下，您应使用 generateSW：
- 您想要预缓存与构建流程关联的文件，包括网址包含您事先可能不知道的哈希值的文件。
- 您有简单的运行时缓存需求，可通过
generateSW的选项进行配置。
不应使用 generateSW 的情况
另一方面，在以下情况下，不应使用 generateSW：
- 您希望使用其他 Service Worker 功能（例如 Web 推送）。
- 您需要更灵活地导入其他脚本或使用特定的 Workbox 模块根据应用的需求微调 Service Worker。
何时使用 injectManifest
在以下情况下，您应使用 injectManifest：
- 您想要预缓存文件，但希望编写自己的 Service Worker。
- 您有复杂的缓存或路由需求，无法通过
generateSW的配置选项表达出来 - 您想要在 Service Worker 中使用其他 API（例如 Web 推送）。
injectManifest 与 generateSW 的不同之处在于，您需要指定源 Service Worker 文件。在此工作流中，源 Service Worker 文件需要包含一个特殊的 self.__WB_MANIFEST 字符串，以便 injectManifest 可以将其替换为预缓存清单。
不应使用 injectManifest 的情况
在以下情况下，不应使用 injectManifest：
- 您不想在 Service Worker 中使用预缓存。
- 我们的 Service Worker 要求非常简单，只需通过
generateSW及其配置选项提供的即可。 - 优先考虑易用性而非灵活性。
使用 Workbox 的构建工具
如果您正在寻找在构建流程中使用 Workbox 且与框架无关的方法，有三种选择：
workbox-cliworkbox-build。 命令行工具。- 使用捆绑器（例如
workbox-webpack-plugin）。
这些构建工具都提供 generateSW 和 injectManifest 模式，以及一组类似的选项。如果您不想将由 Workbox 提供支持的 Service Worker 绑定到特定框架，这些都是不错的选择。为了确定哪个选项最适合，我们来快速了解一下每个选项。
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'
});
在上例中，运行 node build-sw.mjs 命令时，workbox-build 会将生成的 Service Worker 写入 dist 目录。
使用捆绑器
各种打包器都有自己的 Workbox 插件，但 Workbox 团队唯一正式支持的打包器是通过 workbox-webpack-plugin 提供的 webpack。与 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 不同，但存在明显的重叠。具体来说，您无需（也无法）为 GenerateSW 指定 globDirectory 选项，因为 webpack 已经知道生产资源的捆绑位置。
使用框架
这一点所有的内容都侧重于使用 Workbox，而不考虑人们的框架偏好。不过，如果 Workbox 能让开发变得更简单，您也可以在特定框架内使用 Workbox。例如，Workbox 默认随附 create-react-app。后续文章将介绍与 Workbox 的各种不同框架集成。
值得注意的是，这些特定于框架的 Workbox 集成可能会限制您以自己想要的方式配置 Workbox 的能力。在这类情况下，您随时可以回退到此处讨论的方法。
如果我没有构建流程，该怎么办？
本文档假定您的项目有构建流程，但实际上您的项目可能没有。如果您的情况符合上述情况，那么您仍然可以将 Workbox 与 workbox-sw 模块搭配使用。借助 workbox-sw，您可以从 CDN 或本地加载 Workbox 运行时，并编写自己的 Service Worker。
总结
Workbox 的灵活性可确保您在几乎任何项目中都可以使用它，无论其框架或工具链偏好设置如何。所有这些途径都可让您使用几种方法完成预缓存和运行时缓存，并可以在需要时更灵活地构建具有更高级功能的 Service Worker。