Web 软件包使用入门

通过蓝牙将网站作为单个文件共享，并在源站上下文中离线运行

Yusuke Utsunomiya

Kenji Baheux

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

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

Web Bundles API 是一项前沿提案，可让您执行所有这些操作。

浏览器兼容性

Web Bundles API 目前仅在启用了实验性标志的基于 Chromium 的浏览器中受支持。

Web Bundles API 简介

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

Web 软件包（更正式的名称为“捆绑 HTTP 交换”）是 Web 打包提案的一部分。

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

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

Web 软件包说明

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

Web Bundle 具有多项独特的功能：

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

这些功能可用于多种场景。一种常见的场景是能够构建一个易于共享且在没有互联网连接的独立式 Web 应用。例如，假设您和朋友乘坐飞机从东京飞往旧金山。您不喜欢机上娱乐。您的好友正在玩一款名为 PROXX 的有趣 Web 游戏，并告诉您，他们在登机前将该游戏下载为 Web Bundle。它可以完美地离线工作。在 Web Bundle 之前，故事就到此结束，您只能轮流在好友的设备上玩游戏，或者找点别的消磨时间。不过，借助 Web Bundle，您现在可以执行以下操作：

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

以下视频介绍了这种情况。

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

构建 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. 将网站软件包标志设置为已启用。

   

5. 重新启动 Chrome。

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

一切都顺利解决。

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

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

发送反馈

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

• 请将一般反馈发送至 [email protected]。
• 如果您对规范有任何反馈，请访问 https://github.com/WICG/webpackage/issues/new 提交新的规范问题，或发送电子邮件至 [email protected]。
• 如果您发现 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，并为改进该框架而不懈努力。