Upload
others
View
6
Download
0
Embed Size (px)
Citation preview
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 技术