AMP Toolbox 1.0 Released

AMP Toolbox has been around for a while, but I thought it would be a good idea to give a proper introduction now that we have reached the 1.0 milestone. In short, AMP Toolbox is a collection of command line tools and JS APIs that make it easier to successfully publish AMP pages. Each tool can be downloaded and used separately.

Version 1.0 includes two major updates:

1.   AMP documents linter : AMP Linter reports errors and suspicious structures, such as missing or incorrectly sized images, missing CORS headers, or invalid metadata.

2.   Valid Optimized AMP Support: AMP Optimizer can now generate valid AMP, making it easier to host optimized AMP pages.

But there’s even cooler stuff! Let’s take a closer look at what else is in AMP Toolbox.

AMP CLI

First, most of the features included in the AMP Toolbox have a command line interface . You can install it globally via NPM:

 $ npm install @ampproject/toolbox-cli

 $ amp help

Or you can use NPM's built-in ` npx` tool to run a shutdown command:

 $ npx @ampproject/toolbox-cli help

AMP Linter

Brand new toolbox - linter checks your AMP documents for common errors and best practices:

 $ 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

Or if it is not installed:

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

AMP Linter's SXG mode is useful when adding SXG support to your website:

 $ 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 Optimizer

AMP Optimizer is a server-side tool for enhancing the rendering performance of AMP pages. AMP Optimizer implements AMP performance best practices and supports AMP server-side rendering. These optimizations can make FCP times 50% faster.

You can use it via the CLI:

$ amp optimize https://amp.dev

$ amp optimize file.html

However, for production, it’s best to integrate the Toolbox Optimizer as part of your build or rendering chain. There’s also an Express middleware: amp-optimizer-express that can dynamically apply AMP server-side rendering.

AMP Cache URLs

For testing, it is a good idea to check if an AMP page works with all AMP caches. Use toolbox-cache-url to convert the original URL to the AMP cache URL format .

 $ 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

Or for a specific cache:

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

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

AMP Cache List

There is also an API available to get a list of all official AMP caches. This is very useful when implementing CORS on your backend:

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

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

Sometimes you need to quickly update or remove an AMP document from the AMP Cache. This is made easy using the CLI version of the AMP Update Cache API :

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

Of course, there is also an API version available as part of the toolbox-update-cache package.

AMP CORS

Speaking of CORS, many AMP components (such as amp-list or amp-state) leverage remote endpoints by using CORS requests. Part of the AMP toolbox is a connect/express middleware that will automatically add all the CORS headers required for AMP pages. Simply add the toolbox-cors middleware to your express app and you can forget about CORS when serving AMP pages:

 const express = require('express');

 const ampCors = require('@ampproject/toolbox-cors');

 const app = express();

 // That's it!

 app.use(ampCors())

AMP Validation Rules

If you want to implement AMP specific code completion for your favorite text editor, check out amp-validator-rules : A JavaScript library for querying AMP validator rules. The following example lists all valid attributes for the amp-img element:

 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);

 });

Have you mastered the above updates? If you feel that the operation is troublesome, you can also choose Google AMP to build a website in the Yiyingbao Cloud Intelligent Website Building Platform. It takes 3 minutes to build a website and quickly release global servers. Free experience Hotline: 4006552477 15600002121