AMP Toolbox 1.0发布

发布时间: 2019年08月21日

AMP Toolbox已经存在了一段时间了,但我认为现在我们已经达到1.0里程碑时做一个正确的介绍是一个好主意。简而言之,AMP Toolbox是命令行工具和JS API的集合,可以更轻松地成功发布AMP页面。每个工具都可以单独下载和使用。

1.0版本包括两个重大更新:

1.  AMP文档的linterAMP Linter报告错误和可疑结构,例如丢失或大小不正确的图像,缺少CORS标头或无效的元数据。

2.  有效优化的AMP支持:AMP Optimizer现在可以生成有效的AMP,使托管优化的AMP页面变得更加容易。

但是还有更酷的东西!让我们仔细看看AMP Toolbox中的其他内容。

AMP CLI

首先,AMP工具箱中包含的大多数功能都有一个命令行界面。您可以通过NPM全局安装它:

$ npm install @ ampproject / toolbox-cli
$ amp help

或者你可以使用NPM的内置`npx`工具运行一个关闭命令:

$ npx @ ampproject / toolbox-cli help

AMP Linter

全新的工具箱 - linter检查您的AMP文档是否存在常见错误和最佳实践:

$ amp lint https://amp.dev
PASS 1x1 images are specified by <amp-pixel>
WARN All <amp-img> have reasonable width and height
> [https://blog.amp.dev/wp-content/uploads/2019/06/cf_hero.png]: actual ratio [1999/1140 = 1.75] does not match specified [16/9 = 1.77]
> [https://blog.amp.dev/wp-content/uploads/2018/10/img_20180926_163001-01.jpeg]: actual ratio [3680/2314 = 1.59] does not match specified [16/9 = 1.77]
PASS Videos are under 4MB
PASS <amp-video><source/></amp-video> syntax is used for video
PASS Endpoints are accessible from cache
PASS Endpoints are accessible from origin
FAIL <meta charset> is the first <meta> tag
> <meta charset> not the first <meta> tag
PASS Runtime is preloaded

或者没有安装:

$ npx @ ampproject / toolbox-cli lint https://amp.dev

在您的网站上添加SXG支持时,AMP Linter的SXG模式非常有用:

$ amp lint -f sxg https://amp.dev

PASS /amppkg/ is forwarded correctly
PASS application/signed-exchange content negotiation is correct
PASS dump-signedexchange -verify does not report errors

AMP优化器

AMP Optimizer服务器端增强AMP页面呈现性能的工具。AMP Optimizer实现了AMP性能最佳实践,并支持AMP服务器端呈现。这些优化可以使FCP时间快50%。 

您可以通过CLI使用它:

$ amp optimize https://amp.dev

$ amp optimize file.html

但是,对于生产,最好将工具箱优化器集成为构建或渲染链的一部分。还有一个Express中间件:amp-optimizer-express,可以动态应用AMP服务器端渲染。

AMP缓存URL

对于测试,最好检查AMP页面是否适用于所有AMP缓存。使用toolbox-cache-url将原始URL转换为AMP缓存URL格式

$ amp curls https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev
https://amp-dev.amp.cloudflare.com/c/s/amp.dev
https://amp-dev.bing-amp.com/c/s/amp.dev

或者对于特定的缓存:

$ amp curls --cache = google https://amp.dev

https://amp-dev.cdn.ampproject.org/c/s/amp.dev

AMP缓存列表

还有一个API可用于获取所有官方AMP缓存的列表。在后端实现CORS时,这非常有用:

const Caches = require('@ampproject/toolbox-cache-list');

 

Caches.list().then(console.log);

有时需要从AMP缓存中快速更新或删除AMP文档。使用CLI版本的AMP Update Cache API变得非常简单: 

$ amp update-cache https://www.example.com/ --privateKey/path/to/private-key.pem

当然,还有一个API版本可用作toolbox-update-cache包的一部分。

AMP CORS

说到CORS,许多AMP组件(例如amp-list或amp-state)通过使用CORS请求来利用远程端点。AMP工具箱的一部分是一个连接/快速中间件,它将自动添加AMP页面所需的所有CORS。只需将工具箱 - cors中间件添加到您的快速应用程序中,您就可以在提供AMP页面时忘记CORS:

const express = require('express');
const ampCors = require('@ ampproject / toolbox-cors');
const app = express();
// That's it!
app.use(ampCors())

AMP验证规则

如果您想为您喜欢的文本编辑器实现AMP特定代码完成,请查看amp-validator-rules:用于查询AMP验证器规则的JavaScript库。以下示例列出了amp-img元素的所有有效属性:

import validatorRules from '@ampproject/toolbox-validator-rules';
validatorRules.fetch().then(rules => {
  // Get all website specific tag rules ...
  const tags = rules.getTagsForFormat('AMP');
  // ...find the definition of the amp-img tag...
  const ampImg = tags.find(e => e.tagName === 'AMP-IMG');
  const ampImgAttrs = ampImg.attrs
    // ...filter global, layout and amp-bind attributes...
    .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)
    // ...extract the name...
    .map(e => e.name)
    // ...sort alphabetically...
    .sort();
  // ...and display result in the console.
  console.log(ampImgAttrs);
});

以上更新您是否已掌握,如感觉操作比较麻烦,也可在易营宝云智能建站平台中选择Google AMP搭建网站,3分钟建站,快速发布全球服务器,免费体验  热线电话:4006552477  15600002121

上一篇: 没有内容了

相关内容