workbox-cli

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

Workbox CLI 向导的屏幕截图

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 是更好的选择。

如果您目前在使用 GulpGrunt 或其他一些基于 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> 替换为 generateSWinjectManifest(具体取决于您的用例),并将 <path/to/config.js> 替换为配置选项的路径。您的配置可能是由 workbox wizard 自动创建的,也可能是手动微调的。

配置

generateSW使用的选项

您可在参考文档中找到一套完整的配置选项。

injectManifest使用的选项

您可在参考文档中找到一套完整的配置选项。