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 
WARN All  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  syntax is used for video
PASS Endpoints are accessible from cache
PASS Endpoints are accessible from origin
FAIL  is the first  tag
 not the first  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

当前位置: 首页>最新动态
  • ·最新动态

    如何避免图片侵犯版权

  • ·最新动态

    移动索引优先

  • ·最新动态

    “凝聚激情 行稳致远”

  • ·最新动态

    新的AMP网站建设技术:AMP + SSR = 更快加载

  • ·最新动态

    易营宝网站建设平台入驻国内四大云平台

  • ·最新动态

    激情熔炼团队,凝聚成就梦想——易营宝2019春季训练营圆满结束!

  • ·最新动态

    易营宝亮相香港春季电子展

  • ·最新动态

    重磅福利,阿里云携手合作伙伴向公益机构免费提供40多种软件服务!

相关内容