此页面由 Cloud Translation API 翻译。

Web 软件包使用入门

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

宇都宫雄介

Twitter 首页

Kenji Baheux

将整个网站捆绑为单个文件并使其可共享，为网络开辟了新的用例。想象这样一个世界，您可以：

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

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

浏览器兼容性

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

Web Bundles API 简介

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

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

示意图：Web Bundle 是 Web 资源的集合。 — Web Bundle 的工作原理

Web Bundle 中的 HTTP 资源按请求网址编入索引，并且可以选择性地附带签名可为这些资源提供担保。签名可让浏览器了解和验证每个资源的来源，并将每个资源视为来自其真实来源。这与处理签名 HTTP 交换（用于为单个 HTTP 资源签名的功能）的处理方式类似。

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

Web Bundle 说明

确切地说，Web Bundle 是扩展名为 .wbn 的 CBOR 文件（按照惯例），它会将 HTTP 资源打包为二进制格式，并通过 application/webbundle MIME 类型提供。您可以在规范草稿的顶级结构部分了解详情。

Web 软件包具有多项独特功能：

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

这些功能会带来多种情景。一种常见的场景是能够构建一个独立的 Web 应用，使其易于分享且无需互联网连接即可使用。例如，假设您和朋友正在从东京开到旧金山。您不喜欢飞机上的娱乐活动。您的朋友正在玩一款名为 PROXX 的有趣网页游戏，并告知您他们在登机前已经将该游戏下载为 Web 软件包。离线操作没有任何问题。在 Web Bundle 推出之前，故事结束，您要么轮流在朋友的设备上玩这个游戏，要么找其他东西打发时间。不过，有了 Web Bundle，您现在可以执行以下操作：

让好友分享游戏的 .wbn 文件。例如，您可以使用文件共享应用轻松点对点共享文件。
在支持 Web Bundle 的浏览器中打开 .wbn 文件。
在您自己的设备上开始玩游戏，尝试击败好友的高分。

下面的视频对这种情况进行了说明。

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

构建 Web Bundle

go/bundle CLI 是目前捆绑网站最简单的方法。go/bundle 是在 Go 中构建的 Web Bundle 规范的参考实现。

安装 Go。

安装 go/bundle。

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

克隆 preact-todomvc 代码库并构建 Web 应用，以准备捆绑资源。

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

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

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

恭喜！TodoMVC 现在是一种 Web 软件包。

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

试用 Web Bundle

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

前往 about://version 查看您当前运行的 Chrome 版本。如果您运行的是版本 80 或更高版本，请跳过下一步。
如果您运行的不是 Chrome 80 或更高版本，请下载 Chrome Canary。
打开 about://flags/#web-bundles。
将 Web Bundle 标志设置为已启用。

在 about://flags 中启用 Web Bundle
重新启动 Chrome。
如果您使用的是桌面设备，请将 todomvc.wbn 文件拖放到 Chrome 中；如果您使用的是 Android，请在文件管理应用中点按该文件。

一切都能神奇地运行。

TodoMVC 以 Web 软件包的形式离线工作的 Preact 实现

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

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

发送反馈

Chrome 中的 Web Bundle API 实现尚处于实验阶段，尚未完成。并非所有功能都正常运行，并且可能会失败或崩溃。这就是它置于实验性标记背后的原因不过，此 API 已经准备就绪，您可以在 Chrome 中探索它了。 Web 开发者的反馈对于新 API 的设计至关重要，因此请试一试，并将您的想法告诉 Web Bundle 团队的处理人员。

请将常规反馈发送至 webpackage-dev@chromium.org。
如果您对该规范有任何反馈，请访问 https://github.com/WICG/webpackage/issues/new 提交新的规范问题，或发送电子邮件至 wpack@ietf.org。
如果您发现 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 方面所做的卓越工作，以及他在改进框架方面所做的不懈努力。