专栏名称: 阅文前端团队
前端工程师
今天看啥  ›  专栏  ›  阅文前端团队

Google AMP WebPackage 在 Webnovel 的应用

阅文前端团队  · 掘金  · 前端  · 2019-04-19 03:14
阅读 70

Google AMP WebPackage 在 Webnovel 的应用

之前我们的文章(文章链接)也有介绍过,Webnovel (起点海外)在去年年初就将首页以及全部阅读页都接入了 Google 的 AMP 技术,并且从体验和数据上来说都取得了不错的效果。在去年年底我们又进行了一次迭代,把更多的阅读页内容也加入到了 AMP 当中。用户可以在 Google Search 当中搜索到我们的小说内容,并且很快就可以进行阅读。但是同时我们也发现了一些问题,用户在搜索结果的第一个落地页显示的内容是我们的,但是 URL 却是 Google 的 URL。虽然 Google 在顶部加了一个 m.webnovel.com 来源的标识,但是很多用户依然会误解,并且给我们的统一品牌宣传带来了影响。


显然 Google AMP 团队也注意到了这一点,在去年年底的时候推出了 AMP WebPackage 技术来解决这个问题。

WebPackage 背景

讲到 Package,大家可能想到的都是 Webpack,Rollup,Parcel 这些打包工具。而我们这次讲的是 Web Package。Web Package 解决了什么问题呢?它可以让你把你的文件打包给第三方,但是浏览器访问的时候却可以识别出来你真实的域名。我想很多同学第一反应就是想到 CDN,因为现在 CDN 都是托管在第三方的云厂商,为了在云厂商配置我们自己的域名,我们必须把自己的证书私钥配置在云厂商的后台管理页面上,这样可以实现用户访问的是云厂商的 CDN 服务器但是显示的却是我们自己的域名。这种操作带来两个问题,一个是存在着被第三方云厂商泄漏我们证书私钥的风险,另一个是证书过期的时候要记得去第三方平台更新。而 Web Package 就是用来解决这些问题的。

Web Package 的这个特性也正好可以用来解决我们上面发现的问题。

之前的 Google AMP 技术可以让用户在 Google Search 搜索结果页面当中非常迅速地进入到搜索结果页面。为了保证加载速度尽可能地快,Google Search 其实是将符合 AMP 标准的页面缓存进 Google 的 CDN 当中,当命中搜索结果的时候,再从 Google CDN 中加载进来,从而保证了非常快的加载速度。这其实跟我们平常使用 CDN 加速是一样的。必然会带来一个问题,就是展示出来的页面 URL 是 Google 的地址,而非我们自己的域名地址。就如图 1 所示。

为了解决上面的问题,让用户有更好的体验,Google AMP 团队在去年将 Web Package 引入到了 AMP 技术当中。我们也有幸成为了首批接入这个技术的国内发布商。在昨天刚刚结束的 Google AMP 2019 会议上,也得到了 Google 官方的认可。


实现 Web Package 中的 Signed-HTTP-Exchanges

在接入 AMP Web Package 过程中,最重要的一步是将我们的内容返回给 Google 爬虫,而这些内容是需要使用我们的证书进行加密的,这个技术称为 Signed-HTTP-Exchanges (缩写为 SXG)。下面我们将详细介绍如何实现 SXG 并最终在从 Google Search 结果无缝浏览我们的站点。


整个操作不算复杂,一共分为以下三步:

1. 从你的 CA 厂商那获取一个支持 SXG 的证书

这是最重要的一步。如上所述,返回给 Google 爬虫的内容需要使用证书进行非对称加密。而这个证书是必须拥有一个 SXG 的扩展。截止此文章发布日期,只有 Digicert 证书颁发商是支持颁布此类型证书的。并且此证书必须使用 EC 密钥(非 RSA 密钥)以及 prime256v1 算法生成。

需要注意的是,这个证书仅用来给返回谷歌爬虫的 AMP 文档进行加密。之前接入层是什么证书依旧使用什么证书,是没有影响的(需要注意生成新证书不能导致现在在用的旧证书被颁发商吊销)。

2. 在服务器上按照 amppackage 官方步骤部署 amppkg

部署 amppkg 没有什么值得说明的,唯一需要注意的是 amppkg 的配置文件。要捕获请求参数的时候需要加上 QueryRE = “.*”,其他也没有要特别注意的。

amppkg.toml----------Port = 'port listening'CertFile = 'path/to/fullchain.pem' # SXG cert from your CAKeyFile = 'path/to/privkey.pem' # SXG cert keyOCSPCache = '/tmp/amppkg-ocsp'[[URLSet]][URLSet.Sign]Domain = "amppackageexample.com"QueryRE = ".*" # to capture query string复制代码

3. 配置 AMP SXG 回源

下面是简单的 AMP SXG 回源的架构图。
然后就是配置回源接入层了,为了更详细描述这个问题,我们画一个 Webnovel AMP 的回源流程图。

现在 Google 爬虫抓取 SXG 加密的 AMP 文档会有两次请求操作。第一次是一个正常的爬取操作,如果后台是支持给 SXG 加密的 AMP 内容文件的,则可以在返回的 header 头上加上 Vary: AMP-Cache-Transform,Accept,Google 爬虫识别到这个 header 头之后就可以进行第二次爬取操作,并且会在 header 头上带上 AMP-Cache-Transform: google 用来跟第一次爬取操作进行区分。我们的接入层反向代理在识别到这个头部之后,将请求转发到对应的 amppkg server,amppkg server 将对应的内容返回给爬虫即可。

虽然我们给 amppkg server 配置了一个证书,但是这个证书仅用来对内容进行加密,连接是不加密的。所以我们的反向代理转发到 amppkg server 依然用 http 而非 https。

upstream amppkg { proxy_pass http://IP:PORT; }upstream webnovelBackend { proxy_pass http://IP:PORT; }location ^~ /amp/ {    if ($http_amp_cache_transform = "google") {        rewrite ^/(.*)$ /ampSXG/$1 last;        break;    }    # allow google to fetch SXG (Signed Exchange AMP HTML)    add_header Vary "AMP-Cache-Transform, Accept";    proxy_pass         http://webnovelBackend;}location ^~ /ampSXG/ {    # some detail omitted    proxy_pass         http://amppkg/priv/doc/https://m.webnovel.com/; }# this location is for browser to get cert for verifying SXG documentlocation ^~ /amppkg/ {    proxy_pass         http://amppkg/amppkg/;}复制代码


到了这里就完成了整个后台的配置,可以用官方提供的方法来进行验证。要想正式环境(Chrome 73 以及以上才支持 SXG 功能)验证就需要等待一段时间,让 Google 爬虫来爬取这些 SXG 加密的 AMP 文档内容了。

结果展示

下面是 Webnovel 在实现 SXG 之后的一个演示视频。



接入了 AMP Packager 之后的 AMP 和之前有什么区别呢?虽然我们的数据还不够多,但是我们分析结果看来,最终跳出率,以及每 session 浏览的页面数对比之前都得到了比较好的优化。待 Chrome 73+版本得到更多普及之后数据会更加明显,后续再跟大家进行分享。

Tips: 有一个小技巧,正常情况下从 Google Search 引流过来的用户只能享受第一个落地页面的 Google Cache 加速。后续就是我们自己网站的内容了,需要我们自己进行接入优化。但是很多时候在全球化的接入能力上,我们相对 Google 来说还是偏弱的。有没有什么办法让用户尽可能地都浏览 Google Cache 缓存里面的页面呢?在用户需要进行一些进一步操作的时候,我们再切到我们自己的页面。我们研究了一下发现还是可行的。我们的 AMP 页面对应 Google Cache 中的地址是有一个映射关系,比如说我们的 Webnovel AMP SXG 首页对应 Google Cache 缓存的地址就是 m-webnovel-com.ampproject.org/wp/s/m.webn…,我们在页面当中跳转的 AMP SXG 页面都换成对应的 Google Cache 地址就满足了我们的需求,即有效利用了 Google Cache 又让用户像在我们自己站点上操作一样。视频如下:



引用文章:

  1. medium.com/@lewpengfei…
  2. github.com/ampproject/…
  3. www.digicert.com/account/iet…
  4. github.com/WICG/webpac…


查看更多分享,请关注阅文集团前端团队公众号:





原文地址:访问原文地址
快照地址: 访问文章快照