Web 软件包使用入门

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

Yusuke Utsunomiya
Yusuke Utsunomiya
Kenji Baheux
Kenji Baheux

将整个网站捆绑为单个文件并使其可共享 为 Web 开辟了新的应用场景。想象一下，在���样的世界中，您可以：

  • 您可以创作自己的内容，并通过各种方式分发这些内容，而不会影响这些内容 仅限网络
  • 通过蓝牙或 WLAN 直连与好友分享 Web 应用或 Web 内容
  • 通过您自己的 USB 连接您的网站，甚至将其托管在您自己的本地网络上

Web Bundles API 是一个极为先进的提案，可让您���成所有这些操作。

浏览器兼容性

目前，只有位于以下版本的基于 Chromium 的浏览器中才支持 Web Bundles API： 一个实验性标志

Web Bundles API 简介

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

Web Bundle（更正式的名称为捆绑的 HTTP Exchange） 是网页打包工具的一部分， 提案。

此图展示了 Web 软件包是 Web 资源的集合。
Web Bundle 的工作原理

Web Bundle 中的 HTTP 资源按请求网址编入索引，并且可以选择性地 都带有可证明资源的签名通过签名，浏览器可以 了解并验证每项资源的来源，将每项资源视为 与真实来源相比较这与Signed HTTP Exchange 用于对单个 HTTP 资源进行签名的功能。

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

Web 软件包说明

确切地说，Web Bundle 是一个扩展名为 .wbn 的 CBOR 文件（按照惯例）， 将 HTTP 资源打包为二进制格式，并通过 application/webbundle MIME 提供 类型。如需了解详情，请参阅顶级结构 部分。

Web Bundle 具有多项独特功能：

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

这些功能会带来多种不同场景。一种常见的情况是 构建一个易于共享和使用的独立式 Web 应用， 或互联网连接。例如，假设您正在乘坐从东京飞往旧金山的飞机， 和朋友。您不喜欢机上娱乐内容。您的朋友正在玩有趣的游戏 名为《PROXX》的网络游戏，并告诉玩家他们以网页形式下载了这款游戏 登机前先打包好套餐。它可以完美地离线工作。推出 Web 之前 故事就这样结束，那你要么轮流做，要么轮流展示 在朋友的设备上玩游戏，或者找点别的东西来传递 。但借助 Web Bundle，您现在可以执行以下操作：

  1. 让您的好友分享该游戏的 .wbn 文件。例如， 可以通过文件共享应用轻松进行点对点共享。
  2. 在支持 Web Bundle 的浏览器中打开 .wbn 文件。
  3. 开始在您自己的设备上玩游戏，设法打破好友的高分纪录 得分。

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

如您所见，Web Bundle 可包含各种资源，使其可离线工作 并能迅速加载

构建 Web Bundle

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

  1. 安装 Go。

  2. 安装 go/bundle。

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

  3. 克隆 preact-todomvc 代码库并构建 以便准备捆绑资源

    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 网址。如需了解详情，请访问 GitHub 代码库 关于go/bundle。你还可以尝试使用实验性 Node.js 模块进行捆绑， wbn。请注意，wbn 仍处于早期阶段， 开发。

尝试使用 Web Bundle

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

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

  4. 将 Web Bundles 标志设置为已启用。

    about://flags 的屏幕截图
    在 about://flags 中启用 Web 软件包

  5. 重新启动 Chrome。

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

一切都神奇地运行。

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">
</ph> TodoMVC 的 Preact 实现以 Web 软件包的形式离线工作

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

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

发送反馈

Chrome 中的 Web Bundle API 实现尚处于实验阶段，且尚不完善。 并非所有功能都在正常运行，它可能会失败或崩溃。这就是为什么 它背后有一个实验性标记。不过，该 API 已足够，可供您在 Chrome 中探索了。 网络开发者的反馈对于网站设计 所以请试用新版 API 并告诉负责 Web Bundle 开发的人员您的看法。

致谢

非常感谢各位非常优秀的 Chrome 工程团队！ Kunihiko Sakamoto、Tsuyoshi Horo、Takashi Toyoshima、Kinuko Yasuda 和 Jeffrey Yasskin，他们为 在 Canary 中构建功能并查看本文。在 标准化流程 Dan York 帮助克服了 IETF 讨论和 Dave Cramer 一直是 这提供了有关发布商实际需求的丰富资源。我们还要感谢 Jason Miller，感谢他提供的很棒的 preact-todomvc，以及他的 我们必须不断地改进框架