Workbox 命令行界面(包含在 workbox-cli
软件包中)包含一个名为 Workbox 的 Node.js 程序,可在 Windows、macOS 和 UNIX 兼容命令行环境中运行。在后台,workbox-cli 会封装 Workbox-build 模块,并通过灵活的配置提供了一种将 Workbox 集成到命令行构建流程中的简单方法。
安装 CLI
如需使用 Node 安装 CLI,请在终端中运行以下命令:
npm install workbox-cli --global
CLI 模式
CLI 有四种不同的模式:
wizard
:为项目设置 Workbox 的分步指南。generateSW
:为您生成完整的 Service Worker。injectManifest
:将要预缓存的资源注入到项目中。copyLibraries
:将 Workbox 库复制到目录中。
wizard
Workbox 向导会询问一系列有关本地目录设置和您要预缓存的文件的问题。您的回答将用于生成配置文件,该文件可在 generateSW
模式下运行时使用。
大多数开发者只需要运行一次 Workbox 向导,您可以随时使用任何受支持的 build 配置选项手动自定义生成的初始配置文件。
要启动向导,请运行:
npx workbox-cli wizard
generateSW
您可以通过 Workbox CLI 使用配置文件(例如向导生成的文件)生成完整的 Service Worker。
只需运行以下命令:
npx workbox-cli generateSW path/to/config.js
如果开发者对 Workbox 的内置预缓存和运行时缓存功能感到满意,并且不需要自定义其 Service Worker 的行为,我们建议开发者使用 generateSW
模式。
何时使用 generateSW
- 您想要预缓存文件。
- 您有简单的运行时缓存需求。
何时不应使用 generateSW
- 您希望使用其他 Service Worker 功能(即 Web 推送)。
- 您想要导入其他脚本,或为自定义缓存策略添加其他逻辑。
injectManifest
如果开发者想要进一步控制最终 Service Worker 文件,可以使用 injectManifest
模式。此模式假定您已有 Service Worker 文件(其位置在 config.js 中指定)。
运行 workbox injectManifest
时,它会在源 Service Worker 文件中查找特定字符串(默认为 precacheAndRoute(self.__WB_MANIFEST)
)。它将空数组替换为要预缓存的网址列表,并根据 config.js
中的配置选项将 Service Worker 文件写入其目标位置。源 Service Worker 中的其余代码将保持不变。
您可以在此模式下使用 Workbox,如下所示:
npx workbox-cli injectManifest path/to/config.js
何时使用 injectManifest
- 您希望更好地控制 Service Worker。
- 您想要预缓存文件。
- 您需要自定义路由和策略。
- 您希望将 Service Worker 与其他平台功能(例如 Web 推送)结合使用。
何时不应使用 injectManifest
- 您希望通过最简单的方法将 Service Worker 添加到自己的网站。
copyLibraries
如果您想使用 injectManifest
且希望使用托管在您自己的源上的 Workbox 库文件(而不是使用 CDN),此模式非常有用。
您只需要运行该文件,并指定向其中写入文件的路径:
npx workbox-cli copyLibraries third_party/workbox/
构建流程集成
为什么 Workbox 需要与 My Build Process 集成?
Workbox 项目包含许多库,这些库协同工作,为 Web 应用的 Service Worker 提供支持。为了有效使用这些库,需要将 Workbox 集成到 Web 应用的构建流程中。这可确保 Service Worker 能够高效地预缓存所有 Web 应用的关键内容,并使这些内容保持最新。
workbox-cli
是我的构建流程的理想选择吗?
如果您的现有构建流程完全基于 npm 脚本,那么 workbox-cli
是一个不错的选择。
如果您目前使用 webpack 作为构建工具,则使用 workbox-webback-plugin 是更好的选择。
如果您目前在使用 Gulp、Grunt 或其他一些基于 Node.js 的构建工具,那么将 workbox-build 集成到构建脚本中会更好。
如果您根本没有构建流程,则应在使用 Workbox 预缓存任何资源之前制定一个构建流程。试着记住手动运行 workbox-cli 很容易出错,而忘记运行它可能会导致向回访者提供过时的内容。
安装和配置
将 workbox-cli
作为本地项目的开发依赖项安装后,您可以在现有构建流程的 npm 脚本末尾添加对 workbox
的调用:
通过 package.json 运行:
{
"scripts": {
"build": "my-build-script && workbox <mode> <path/to/config.js>"
}
}
将 <mode>
替换为 generateSW
或 injectManifest
(具体取决于您的用例),并将 <path/to/config.js>
替换为配置选项的路径。您的配置可能是由 workbox wizard
自动创建的,也可能是手动微调的。
配置
generateSW
使用的选项
您可在参考文档中找到一套完整的配置选项。
injectManifest
使用的选项
您可在参考文档中找到一套完整的配置选项。