Web Packaging

Michael Yeung

杨智行

今天的 Web - 不禁让人感受到 navigation 的慢

今天的 Web - 不禁让人感受到 navigation 的慢

今天的 Web - 不禁让人感受到 navigation 的慢

今天的 Web - 不禁让人感受到 navigation 的慢

三层不同的加速方式

AMP HTML &JAVASCRIPT AMP CACHE 平台 Pre-render

默认快速，强制验证 近距离缓存及优化 特异功能！

… 产品里一一实现 （lòu xiàn）

浏览器 address bar

AMP Viewer header

从 Cache 加载的 AMP 页面(AMP Viewer 里渲染)

把 AMP 的学习经验带到 The Whole Web

AMP 的特别之处(AMP viewer，格式，等)

非AMP 页面

难！

Web Platform

把 AMP 的学习经验带到 The Whole Web

非 AMP 页面

Web Platform

新 Standard 技术

Web Packaging

提升用户体验的新 Web 标准

Web Packaging

保障用户隐私的 Instant Navigation

目标: 既 Instant 又 reliable 的加载

michael.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html

方案 #1 : Prefetch

michael.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html

Referrer siteprefetch

方案 #1 : Prefetch

michael.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html

Referrer siteprefetch

● 隐私问题！

方案 #2: Prefetch + Cache

michael.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html

Referrer siteprefetch

方案 #2: Prefetch + Cache

popular-traffic-source.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html prefetch

Referrer siteprefetch

方案 #2: Prefetch + Cache

popular-traffic-source.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html prefetch

Referrer siteprefetch

方案 #2: Prefetch + Cache

popular-traffic-source.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html prefetch

Referrer siteprefetch

方案 #3: Prefetch + Cache + 授权加载

michael.org/essays/why-webpkg-awesome.html

michael.org/essays/why-webpkg-awesome.html prefetch

Referrer siteprefetch

你的 resource 应该有个 proof-of-origin 来证明这个 resource 确实是属于你的。

这就是 Web Packaging 的功效。

Web Packaging

ExchangesSigned

Exchanges

● Exchanges = HTTP request/response pairs

● Signed Exchanges = 已加密签名的 Exchanges，好让浏览器验证 resource 的来源

● Bundled Exchanges =Exchanges 的 “包“ （未必需要是Signed） Bundled

Exchange

Web Packaging

ExchangesSigned

Exchanges

● Exchanges = HTTP request/response pairs

● Signed Exchanges = 已加密签名的 Exchanges，好让浏览器验证 resource 的来源

● Bundled Exchanges =Exchanges 的 “包“ （未必需要是Signed） Bundled

Exchange

试用 Signed Exchange!

● 把 flag 打开：chrome://flags/#enable-signed-http-exchange

● Open experiment: https://bit.ly/try-sxg

Hello World, SXG!

Chrome 71+

https://bit.ly/try-sxg

在你的 site 使用 Signed Exchange

生成 Signed Exchange 的开源工具： bit.ly/webpackaging更多： bit.ly/try-sxg

Resourcehello.html

Signed Exchange

签名 (Signature)● Original resource URL● 证书 URL （Certificate)● 什么时候 expire● Payload 的 digest

证书 (Certificate)with “CanSignHttpExchanges”

+ =

CURRENT without signed exchange WITH SIGNED EXCHANGE

Access to cookies as first party

AMP Web Packaging - 谷歌搜索的开发者预览版

g.co/webpackagepreview

Web Packaging

ExchangesSigned

Exchanges

● Exchanges = HTTP request/response pairs

● Signed Exchanges = 已加密签名的 Exchanges，好让浏览器验证 resource 的来源

● Bundled Exchanges =Exchanges 的 “包“ （未必需要是Signed） Bundled

Exchange

Bundled Exchanges

● Status - 早期研发中！

愿景：

● 离线加载 Web 内容● 存储 + 分享页面给附近的人● 更加快速加载

BundledExchange

ExchangesSigned

Exchanges

Bundled Exchanges

Demo: News-Reader PWA

离线加载多个站点的内容

Based on github.com/jakearchibald/site-sketches/reader

路线图

2018 2019 Beyond

Signed Exchange

Bundled Exchanges

Origin trial Stable

Origin trial

把 AMP 的学习经验带到 The Whole Web

非 AMP 页面

Web Platform

新 Standard 技术