Lanzamiento de AMP Toolbox 1.0

AMP Toolbox ha existido durante un tiempo, pero creo que ahora que hemos alcanzado el hito de la versión 1.0, es un buen momento para hacer una introducción adecuada. En resumen, AMP Toolbox es una colección de herramientas de línea de comandos y API de JS que facilitan la publicación exitosa de páginas AMP. Cada herramienta se puede descargar y usar por separado.

La versión 1.0 incluye dos actualizaciones importantes:

1.  El linter de documentos AMP: AMP Linter informa errores y estructuras sospechosas, como imágenes faltantes o con dimensiones incorrectas, encabezados CORS faltantes o metadatos inválidos.

2.  Soporte optimizado para AMP: AMP Optimizer ahora puede generar AMP válido, haciendo que las páginas AMP optimizadas para alojamiento sean más accesibles.

¡Pero hay cosas aún más geniales! Echemos un vistazo más de cerca a lo que ofrece AMP Toolbox.

AMP CLI

En primer lugar, la mayoría de las funciones incluidas en AMP Toolbox tienen una interfaz de línea de comandos. Puedes instalarlo globalmente mediante NPM:

$ npm install @ ampproject / toolbox-cli

$ amp help

O puedes usar la herramienta incorporada de NPM `npx` para ejecutar un comando único:

$ npx @ ampproject / toolbox-cli help

AMP Linter

El nuevo linter de la caja de herramientas verifica si tus documentos AMP contienen errores comunes y siguen las mejores prácticas:

$ 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

O sin instalación:

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

Cuando agregas soporte SXG a tu sitio, el modo SXG de AMP Linter es muy útil:

$ 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

Optimizador de AMP

AMP Optimizer es una herramienta de mejora del lado del servidor para el rendimiento de páginas AMP. AMP Optimizer implementa las mejores prácticas de rendimiento de AMP y admite la representación del lado del servidor de AMP. Estas optimizaciones pueden acelerar el FCP en un 50%. 

Puedes usarlo a través de la CLI:

$ amp optimize https://amp.dev

$ amp optimize file.html

Sin embargo, para producción, es mejor integrar el optimizador de la caja de herramientas como parte de la cadena de construcción o representación. También hay un middleware para Express: amp-optimizer-express, que puede aplicar dinámicamente la representación del lado del servidor de AMP.

URL de caché de AMP

Para pruebas, es mejor verificar si una página AMP es apta para todos los cachés de AMP. Usa toolbox-cache-url para convertir una URL original en un formato de URL de caché de AMP.

$ 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

O para un caché específico:

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

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

Lista de cachés de AMP

También hay una API disponible para obtener una lista de todos los cachés oficiales de AMP. Esto es muy útil al implementar CORS en el backend:

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

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

A veces es necesario actualizar o eliminar rápidamente documentos AMP desde un caché de AMP. Usar la versión CLI de la API de Actualización de Caché de AMP es muy sencillo: 

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

Por supuesto, también hay una versión API disponible como parte del paquete toolbox-update-cache.

CORS de AMP

Hablando de CORS, muchos componentes de AMP (como amp-list o amp-state) aprovechan las solicitudes CORS para utilizar puntos finales remotos. Parte de AMP Toolbox es un middleware de conexión/rápido que agregará automáticamente todos los encabezados CORS necesarios para las páginas AMP. Simplemente agrega el middleware cors de la caja de herramientas a tu aplicación rápida y podrás olvidarte de CORS al servir páginas AMP:

const express = require（'express'）;

const ampCors = require（'@ ampproject / toolbox-cors'）;

const app = express（）;

// ¡Eso es todo!

app.use(ampCors())

Reglas de validación de AMP

Si deseas implementar la finalización de código específico de AMP para tu editor de texto favorito, consulta amp-validator-rules: una biblioteca JavaScript para consultar las reglas del validador de AMP. El siguiente ejemplo enumera todos los atributos válidos del elemento amp-img:

import validatorRules from '@ampproject/toolbox-validator-rules';

validatorRules.fetch().then(rules => {

 // Obtener todas las reglas de etiquetas específicas del sitio web...

 const tags = rules.getTagsForFormat('AMP');

 // ...encontrar la definición de la etiqueta amp-img...

 const ampImg = tags.find(e => e.tagName === 'AMP-IMG');

 const ampImgAttrs = ampImg.attrs

 // ...filtrar atributos globales, de diseño y amp-bind...

 .filter(e => !e.name.startsWith('[') && !e.global && !e.layout)

 // ...extraer el nombre...

 .map(e => e.name)

 // ...ordenar alfabéticamente...

 .sort();

 // ...y mostrar el resultado en la consola.

 console.log(ampImgAttrs);

}）;

Si te parece complicado manejar estas actualizaciones, también puedes elegir construir tu sitio con Google AMP en la plataforma de construcción inteligente Yiyunbao. Construye en 3 minutos, publica rápidamente en servidores globales, prueba gratis. Línea directa: 4006552477  15600002121