在2019年Chrome开发者峰会上，谷歌预览了全新的Web Bundles API。这是一种基础架构 API，开发人员可以通过它以任何格式（电子邮件、FTP 甚至 USB）分发他们的 Web 内容，而内容本身不会有任何改动。这种技术不仅能够以闪电般的速度交付 Web 内容，而且即使用户处于脱机状态，也可以实现点对点内容分发。

将完整的网站打包成单个文件并使其可共享的能力为Web打开了新的大门。想象这样一个世界，你可以在其中：

创建自己的内容并以各种方式分发它，而不受网络的限制。
通过蓝牙或Wi-Fi Direct与你的朋友共享一个Web应用或一段Web内容。
使用你自己的USB设备携带你的站点内容，甚至将其托管在你自己的本地网络中。

Web Bundles API是一项前沿提案，可以让你做到上面所有这些内容。

Web Bundles API简介

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

Web Bundles（正式名称为Bundled HTTP Exchanges）是Web打包提案的一部分。

Web Bundels的工作机制

Web Bundle中的HTTP资源通过请求URL进行索引，并且可以选择带有可用来证明资源的签名。签名使浏览器能够理解和验证每种资源的来源，并将这些资源视为来自它们的真正源头。这种机制类似签名HTTP交换，也就是签名单个HTTP资源的功能。

本文将带你了解什么是Web Bundle，以及如何使用它。

Web Bundles介绍

确切地说，Web Bundle是一个扩展名为.wbn（按照约定）的CBOR文件，它将HTTP资源打包为二进制格式，并使用application/webbundle MIME类型。你可以在规范草案的“顶层结构”部分中了解有关此内容的更多信息。

Web Bundle具有多个独特功能：

封装多个页面，使整个网站可以打包到一个文件中；
支持可执行的JavaScript，改进了MHTML的不足；
使用HTTP Variants进行内容协商，这样即使打好的包在离线时使用，也可以使用Accept-Language标头支持国际化功能；
由发布者加密签名时，在其来源的上下文中加载；
在本地启动时几乎瞬时加载。

这些功能为众多场景打开了新的大门。一种常见的场景是构建自包含的Web应用，无需Internet连接即可轻松共享和使用这个应用。例如，假设你和朋友一起从东京飞往旧金山。你不喜欢机上娱乐系统。你的朋友正在玩一个名为PROXX的有趣的网络游戏，并告诉你在登机之前她以Web Bundle的形式下载了该游戏。它可以在离线状态下完美地运行。在Web Bundles发布之前，故事就此结束了，你们要么不得不轮流在你朋友的设备上玩游戏，要么找到其他东西来打发时间。但现在有了Web Bundles，你就可以这样做了：

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

下面这段视频解释了这种情况：

https://youtu.be/xAujz66la3Y

如你所见，Web Bundle可以包含所有资源，使其脱机工作并瞬时加载。

当前，Chrome 80仅支持未签名的bundles（也就是不带原始签名的Web Bundles）。由于Web Worker的跨域问题，没有签名的PROXX包运行起来不是很完美。Chrome正在努力解决这个问题。同时，请查看处理未签名打包中的常见问题，以了解如何避免跨域问题。

构建Web Bundles

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

安装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 Bundle了。
打包方法还有其他选择，并且将来还会有更多选择。go/bundle CLI让你可以使用HAR文件或资源URL的自定义列表来构建Web Bundle。访问GitHub仓库以了解有关go/bundle的更多信息。你还可以尝试实验性的Node.js模块来打包wbn。请注意，wbn仍处于开发的早期阶段。

玩转Web Bundles

要尝试Web Bundle：

转到chrome://version，查看你正在运行的Chrome版本。如果你运行的是80版或更高版本，请跳过下一步。
如果运行的不是Chrome 80或更高版本，请下载Chrome Canary。
打开chrome://flags/#web-bundles。
将Web Bundles标志设置为Enabled。

在chrome://flags中启用Web Bundles

重新启动Chrome。
如果你是在桌面环境中，则将todomvc.wbn文件拖放到Chrome中；如果是Android环境，则在文件管理应用中点击它。

现在魔法一切就绪了。

当前，你只能浏览存储在本地文件中的Web Bundle，但这只是一个临时限制。

发送反馈

Chrome中的Web Bundle API实现是实验性的，尚不完整。并非所有功能都会正常运行，并且可能会失败或崩溃。这就是为什么它位于实验性标志后。但是这个API已经足够让你在Chrome中进行探索了。Web开发人员的反馈对于新API的设计是至关重要的，因此请尝试一下，并告诉正在开发Web Bundles的人们你的想法如何。

致谢

我们想向优秀的Chrome工程团队致以诚挚的谢意，他们是坂本邦彦、霍隆刚、丰岛隆史、安田健子和Jeffrey Yasskin，他们为规范做出了巨大贡献，在Canary上构建了该功能并审阅了本文。在标准化过程中，Dan York帮助引导了IETF的讨论，还有Dave Cramer，为发布者提供了所需要的重要资源。我们还要感谢Jason Miller制作的出色的preact-todomvc，以及他为改进框架而做出的不懈努力。

原文链接：
https://web.dev/web-bundles/

创作场景

谷歌新提案：Web Bundles API 可在脱机状态实现内容分发