QCon 全球软件开发大会(北京站)门票 9 折倒计时 4 天,点击立减 ¥880 了解详情
写点什么

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

2019 年 11 月 19 日

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

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,你就可以这样做了:


  1. 请你的朋友分享游戏的.wbn 文件。例如,可以使用文件共享应用轻松地对等共享文件。

  2. 在支持 Web Bundles 的浏览器中打开.wbn 文件。

  3. 开始在你自己的设备上玩游戏,并尝试打破朋友的高分纪录。


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


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 规范的参考实现。


  1. 安装Go

  2. 安装 go/bundle。


go get -u github.com/WICG/webpackage/go/bundle/cmd/...
复制代码


克隆preact-todomvc仓库并构建 Web 应用,以准备打包资源。


git clone https://github.com/developit/preact-todomvc.gitcd preact-todomvcnpm inpm 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:


  1. 转到 chrome://version,查看你正在运行的 Chrome 版本。如果你运行的是 80 版或更高版本,请跳过下一步。

  2. 如果运行的不是 Chrome 80 或更高版本,请下载Chrome Canary

  3. 打开 chrome://flags/#web-bundles。

  4. Web Bundles 标志设置为 Enabled



在 chrome://flags 中启用 Web Bundles


  1. 重新启动 Chrome。

  2. 如果你是在桌面环境中,则将 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/


2019 年 11 月 19 日 10:461604
用户头像
王文婧 InfoQ编辑

发布了 126 篇内容, 共 61.7 次阅读, 收获喜欢 251 次。

关注

评论 1 条评论

发布
用户头像
有点类似微信小程序哈!
2019 年 11 月 20 日 09:20
回复
没有更多了
发现更多内容

第五周作业

武鹏

太阳马戏团在疫情下的组合式创新

石云升

商业模式 组合式创新 思想实验

java基础思维导图,让java不再难懂 (建议收藏))

码哥小胖

Spring Boot Java 面试 Java 分布式

了不起的 Webpack 构建流程学习指南

pingan8787

Java 前端 Web webpack

了不起的 tsconfig.json 学习指南

pingan8787

typescript 前端 Web

​ “强大基座”再展能力,一朵“云”掀起国产化浪潮

Geek_116789

最详细的Java/后端学习路线

犬来八荒

宅家复习一个月,成功入职腾讯,才知道算法实在太太太重要了

互联网架构师小马

程序员 腾讯 面试 算法 找工作

架构师训练营 - 第五课作业 -20200708- 一致性HASH

👑👑merlan

极客大学架构师训练营 一致性哈希

自动特征工程在推荐系统中的研究

天枢数智运营

人工智能 推荐系统

公司短信平台上的两万块钱,瞬间就被刷没了

古时的风筝

短信防刷 接口安全 短信轰炸机

阿里大型企业级开发必用微服务:深入浅出SpringBoot2.x

小闫

spring jdk 后端 Java 面试 springboot

业务学习-美团闪购

第519区

系统架构师week04 Homework - 互联网架构技术手段和方案

尔东雨田

极客大学架构师训练营

nightingale安装详解

曾祥斌

蟒周刊/427:机器狗已在公开发售,支持用 Python 对其编程...

ZoomQuiet大妈

Python 大妈 蟒营® 蟒周刊 101camp

高效程序员的七个好习惯——你有吗?

小谈

JVM Java 面试 springboot 程序员素养 SpringCloud

Java开发连Redis都不会还想跳槽涨薪?先把Redis的知识点吃透再说

互联网架构师小马

数据库 redis 缓存 面试 找工作

2020年7月国产数据库排行:华为、腾讯发新品,中兴、阿里结硕果

墨天轮

数据库 阿里 排行榜

ThreadPoolExecutor 线程池使用

郭儿的跋涉

线程 多线程 线程池

区块链正处于手脚并用攀爬的“攻坚时刻”

CECBC区块链专委会

数据上链 市场选择

数据产品经理的具象化

松子(李博源)

大数据 产品经理 数据产品

不懂什么是高并发?看完这篇文章你可以去吊打面试官了

互联网架构师小马

高可用 高并发 高性能 高并发系统设计 多线程与高并发

数据集永久下架,微软不是第一个,MIT 也不是最后一个

神经星星

AI 计算机视觉 MIT AI 伦理 数据集

选择排序

wjchenge

2.3万个MongoDB数据库遭黑客比特币勒索,你中招了吗?中招怎么办?

墨天轮

比特币 数据库 oracle mongodb 黑客

架构师训练营 第五周 作业

Poplar

谁没个焦虑的时段呢?

封不羁

个人成长 个人感想 程序员成长

猿灯塔:最详细Dubbo相关面试题

猿灯塔

四面阿里巴巴回来分享面经总结,定级P7架构师

小吴选手

架构 技术 Spring Boot 阿里 Java 面试

信创舆情一线--印度封禁59款中国App

统小信uos

App 舆情 印度

边缘计算隔离技术的挑战与实践

边缘计算隔离技术的挑战与实践

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