通过蓝牙将网站作为单个文件共享,并在源站上下文中离线运行
将整个网站捆绑为单个文件并使其可共享 为 Web 开辟了新的应用场景。想象一下,在这样的世界中,您可以:
- 您可以创作自己的内容,并通过各种方式分发这些内容,而不会影响这些内容 仅限网络
- 通过蓝牙或 WLAN 直连与好友分享 Web 应用或 Web 内容
- 通过您自己的 USB 连接您的网站,甚至将其托管在您自己的本地网络上
Web Bundles API 是一个极为先进的提案,可让您完成所有这些操作。
浏览器兼容性
目前,只有位于以下版本的基于 Chromium 的浏览器中才支持 Web Bundles API: 一个实验性标志
Web Bundles API 简介
Web Bundle 是一种文件格式,用于将一个或多个 HTTP 资源封装在 单个文件。它可以包含一个或多个 HTML 文件、JavaScript 文件 图片或样式表
Web Bundle(更正式的名称为捆绑的 HTTP Exchange) 是网页打包工具的一部分, 提案。
<ph type="x-smartling-placeholder">![此图展示了 Web 软件包是 Web 资源的集合。](https://developer.chrome.google.cn/static/docs/web-platform/web-bundles/image/a-figure-demonstrating-a-f7b74c30727f2.png?authuser=9&hl=sl)
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,您现在可以执行以下操作:
- 让您的好友分享该游戏的
.wbn
文件。例如, 可以通过文件共享应用轻松进行点对点共享。 - 在支持 Web Bundle 的浏览器中打开
.wbn
文件。 - 开始在您自己的设备上玩游戏,设法打破好友的高分纪录 得分。
以下视频说明了这种情况。
如您所见,Web Bundle 可包含各种资源,使其可离线工作 并能迅速加载
构建 Web Bundle
go/bundle
CLI 目前是
捆绑网站的最简单方法go/bundle
是 Web Bundle 的参考实现
使用 Go 构建规范。
- 安装 Go。
安装
go/bundle
。go get -u github.com/WICG/webpackage/go/bundle/cmd/...
克隆 preact-todomvc 代码库并构建 以便准备捆绑资源
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 文件或自定义资源列表构建 Web Bundle
网址。如需了解详情,请访问 GitHub 代码库
关于go/bundle
。你还可以尝试使用实验性 Node.js 模块进行捆绑,
wbn
。请注意,wbn
仍处于早期阶段,
开发。
尝试使用 Web Bundle
如需试用 Web Bundle,请执行以下操作:
- 转到
about://version
即可查看您运行的 Chrome 版本。如果您运行的是 80 或更高版本,请跳过下一步。 - 如果您运行的不是 Chrome 80,请下载 Chrome Canary 或更新版本。
- 打开
about://flags/#web-bundles
。 将 Web Bundles 标志设置为已启用。
<ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">
</ph> 在 about://flags
中启用 Web 软件包重新启动 Chrome。
将
todomvc.wbn
文件拖放到 Chrome(如果您使用的是桌面设备),或者在文件中点按该文件 管理应用。
一切都神奇地运行。
<ph type="x-smartling-placeholder">您还可以尝试使用其他示例 Web 软件包:
- web.dev.wbn 是 截至 2019 年 10 月 15 日的整个 web.dev 网站概况。
- proxx.wbn: PROXX 是可离线使用的扫雷克隆版本。
- squoosh.wbn: Squoosh 是一款方便快捷的图片优化工具, 您可以并排比较各种图片压缩格式, 调整大小和格式转换。
发送反馈
Chrome 中的 Web Bundle API 实现尚处于实验阶段,且尚不完善。 并非所有功能都在正常运行,它可能会失败或崩溃。这就是为什么 它背后有一个实验性标记。不过,该 API 已足够,可供您在 Chrome 中探索了。 网络开发者的反馈对于网站设计 所以请试用新版 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,以及他的 我们必须不断地改进框架