AMP Toolbox 1.0发布

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

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

1.  AMP文档的linter：AMP 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