通过蓝牙将网站作为单个文件共享,并在源上下文中离线运行
将整个网站捆绑为单个文件并使其可共享,为网络开辟了新的用例。想象这样一个世界,您可以:
- 创作自己的内容并以各种方式分发,而不受网络限制
- 通过蓝牙或 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 资源的集合。](https://developer.chrome.com/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=0&hl=zh-cn)
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,请在文件管理应用中点按该文件。
一切都能神奇地运行。
您还可以尝试使用其他示例 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 方面所做的卓越工作,以及他在改进框架方面所做的不懈努力。