web packaging2018/11/17 · 把 amp 的学习经验带到 the whole web amp 的特别之处 (amp...
Post on 08-Feb-2021
3 Views
Preview:
TRANSCRIPT
-
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 技术
top related