Web 软件包使用入门

通过蓝牙以单个文件的形式共享网站，并在来源环境中离线运行这些网站

Yusuke Utsunomiya

Kenji Baheux

警告：Chrome 已于 2023 年 2 月移除导航到 Web Bundle 的实验性实现。

将整个网站打包为单个文件并使其可分享，为 Web 开辟了新的用例。想象一下，您可以：

• 创建自己的内容，并以各种方式分发，而不受影音平台的限制
• 通过蓝牙或 Wi-Fi Direct 与好友分享 Web 应用或 Web 内容
• 通过您自己的 USB 连接您的网站，甚至将其托管在您自己的本地网络上

Web Bundles API 是一个前沿的提案，可让您完成所有这些工作。

浏览器兼容性

目前，只有基于 Chromium 且已启用实验性标志的浏览器支持 Web Bundles API。

Web Bundles API 简介

Web Bundle 是一种将一个或多个 HTTP 资源封装在单个文件的文件格式。它可以包含一个或多个 HTML 文件、JavaScript 文件、图片或样式表。

Web Bundle（更正式地称为捆绑的 HTTP 交换）是 Web 打包提案的一部分。

Web Bundle 的运作方式

Web Bundle 中的 HTTP 资源按请求网址编入索引，并且可以选择附带用于证明资源的签名。借助签名，浏览器可以了解和验证每个资源的来源，并将每个资源视为来自其真实来源。这与处理 Signed HTTP Exchange（用于对单个 HTTP 资源进行签名的功能）的方式类似。

本文介绍了什么是 Web 软件包以及如何使用 Web 软件包。

Web Bundle 说明

确切地说，Web 软件包是具有 .wbn 扩展名的 CBOR 文件（按惯例），用于将 HTTP 资源打包为二进制格式，并以 application/webbundle MIME 类型提供。如需了解详情，请参阅规范草稿的顶级结构部分。

Web Bundle 具有多项独特功能：

• 封装多个页面，可将整个网站捆绑到单个文件中
• 启用可执行的 JavaScript，与 MHTML 不同
• 使用 HTTP 变体进行内容协商，这样即使离线使用软件包，也可以通过 Accept-Language 标头实现国际化
• 在发布商对其进行加密签名后，在其来源上下文中加载
• 在本地提供时几乎可即时加载

这些功能可用于多种场景。一个常见场景是，能够构建一个自包含的 Web 应用，该应用易于共享，且无需连接到互联网即可使用。例如，假设您和朋友乘坐飞机从东京飞往旧金山。您不喜欢机上娱乐内容。您的好友正在玩一款名为 PROXX 的有趣 Web 游戏，并告诉您，他们在登机前将该游戏下载为 Web Bundle。它可在离线状态下正常运行。在推出 Web Bundle 之前，故事就此结束，您必须轮流在朋友的设备上玩游戏，或者找点其他东西打发时间。但借助 Web Bundle，您现在可以执行以下操作：

1. 请您的朋友分享游戏的 .wbn 文件。例如，可以使用文件共享应用轻松地点对点共享文件。
2. 在支持 Web Bundle 的浏览器中打开 .wbn 文件。
3. 开始在自己的设备上玩游戏，并尝试打破好友的高分记录。

以下视频说明了这种情况。

如您所见，Web Bundle 可以包含所有资源，使其能够离线运行并即时加载。

注意：目前，Chrome 80 仅支持未签名的软件包（即不含来源签名的 Web 软件包）。由于 Web Worker 跨源问题，捆绑没有签名的 PROXX 无法正常运行。Chrome 正在努力解决此问题。与此同时，请参阅处理未签名软件包中的常见问题，了解如何避免跨源问题。

构建 Web Bundle

目前，go/bundle CLI 是打包网站的最简单方法。go/bundle 是内置 Go 的 Web Bundle 规范的参考实现。

1. 安装 Go。

2. 安装 go/bundle。

   go get -u github.com/WICG/webpackage/go/bundle/cmd/...
   

3. 克隆 preact-todomvc 代码库并构建 Web 应用，以便准备好打包资源。

   git clone https://github.com/developit/preact-todomvc.git
   cd preact-todomvc
   npm i
   npm run build
   

4. 使用 gen-bundle 命令构建 .wbn 文件。

   gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn
   

恭喜！TodoMVC 现在是 Web Bundle。

还有其他捆绑选项，我们还会推出更多选项。借助 go/bundle CLI，您可以使用 HAR 文件或自定义资源网址列表构建 Web Bundle。如需详细了解 go/bundle，请访问 GitHub 代码库。您还可以试用用于打包的实验性 Node.js 模块 wbn。请注意，wbn 仍处于早期开发阶段。

玩转 Web Bundle

如需试用 Web Bundle，请执行以下操作：

1. 请前往 about://version 查看您运行的是哪个版本的 Chrome。如果您使用的是 80 或更高版本，请跳过下一步。
2. 如果您运行的不是 Chrome 80 或更高版本，请下载 Chrome Canary。
3. 打开 about://flags/#web-bundles。

4. 将网站软件包标志设置为已启用。

   

   在 about://flags 中启用 Web 软件包

5. 重新启动 Chrome。

6. 如果您使用的是桌面设备，请将 todomvc.wbn 文件拖放到 Chrome 中；如果您使用的是 Android 设备，请在文件管理应用中点按该文件。

一切都顺利解决。

TodoMVC 的 Preact 实现以 Web 软件包的形式离线运行

您还可以试用其他示例 Web 软件包：

• web.dev.wbn 是截至 2019 年 10 月 15 日的整个 web.dev 网站的快照。
• proxx.wbn：PROXX 是一款可离线使用的扫雷游戏克隆。
• squoosh.wbn：Squoosh 是一款方便又快速的图片优化工具，可让您并排比较各种图片压缩格式，并支持调整大小和格式转换。

注意：目前，您只能导航到存储在本地文件中的 Web Bundle，但这只是暂时性的限制。

发送反馈

Chrome 中的 Web Bundle API 实现是实验性的，并且尚未完成。并非所有功能都正常运行，并且可能会失败或崩溃。因此，此功能需要切换实验标志才会启用。不过，该 API 已经可以供您在 Chrome 中探索了。 网络开发者的反馈对新 API 的设计至关重要，因此请试用 Web Bundle，并告诉 Web Bundle 团队您的想法。

• 请将一般反馈发送至 [e-mail]。
• 如果您对规范有任何反馈，请访问 https://github.com/WICG/webpackage/issues/new 提交新的规范问题，或发送电子邮件至 [e-mail]。
• 如果您发现 Chrome 行为存在任何问题，请访问 https://crbug.com/new 提交 Chromium bug。
• 我们也非常欢迎您对规范讨论和工具做出贡献。如需参与，请访问规范代码库。

致谢

我们衷心感谢出色的 Chrome 工程团队，包括 Kunihiko Sakamoto、Tsuyoshi Horo、Takashi Toyoshima、Kinuko Yasuda 和 Jeffrey Yasskin，他们为规范做出了巨大贡献，在 Canary 上构建了该功能，并审核了这篇文章。在标准化过程中，Dan York 帮助我们引导了 IETF 讨论，而 Dave Cramer 则是了解发布商实际需求的绝佳资源。我们还要感谢 Jason Miller，感谢他开发了出色的 preact-todomvc，并为改进该框架而不懈努力。