إصدار AMP Toolbox 1.0

صندوق أدوات AMP موجود منذ فترة، ولكن أعتقد أننا الآن وصلنا إلى مرحلة 1.0 حيث يكون من الجيد تقديم تعريف صحيح. باختصار، صندوق أدوات AMP هو مجموعة من أدوات سطر الأوامر وواجهة برمجة تطبيقات جافا سكريبت (JS API) التي تمكنك من نشر صفحات AMP بنجاح وبسهولة أكبر. يمكن تنزيل واستخدام كل أداة بشكل منفصل.

يتضمن الإصدار 1.0 تحديثين رئيسيين:

1.  أداة AMP Linter لفحص مستندات AMP: تبلغ AMP Linter عن الأخطاء والهياكل المشبوهة، مثل الصور المفقودة أو ذات الأحجام غير الصحيحة، أو نقص رؤوس CORS أو بيانات العناصر غير الصالحة.

2.  دعم تحسين AMP الفعال: يمكن الآن لـ AMP Optimizer إنشاء AMP فعال، مما يجعل صفحات AMP المُحسنة المضيفة أسهل في الاستخدام.

ولكن هناك المزيد من الأشياء الرائعة! دعونا نلقي نظرة فاحصة على المحتويات الأخرى في صندوق أدوات AMP.

واجهة سطر أوامر AMP

أولاً، تحتوي معظم الوظائف في صندوق أدوات AMP على واجهة سطر أوامر. يمكنك تثبيتها عالميًا عبر NPM:

$ npm install @ ampproject / toolbox-cli

$ amp help

أو يمكنك استخدام أداة `npx` المدمجة في NPM لتشغيل أمر لمرة واحدة:

$ npx @ ampproject / toolbox-cli help

أداة فحص AMP

تفحص أداة الفحص - 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 إلى موقعك، يكون وضع SXG في أداة فحص AMP مفيدًا جدًا:

$ 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٪. 

يمكنك استخدامه عبر واجهة سطر الأوامر:

$ amp optimize https://amp.dev

$ amp optimize file.html

ولكن للإنتاج، من الأفضل دمج محسن صندوق الأدوات كجزء من سلسلة البناء أو العرض. هناك أيضًا برنامج وسيط Express: amp-optimizer-express، لتطبيق عرض AMP من جانب الخادم ديناميكيًا.

عنوان URL لخادم AMP

للاختبار، من الأفضل التحقق مما إذا كانت صفحة AMP مناسبة لجميع خوادم AMP. استخدم toolbox-cache-url لتحويل عنوان URL الأصلي إلى تنسيق عنوان URL لخادم 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

أو لخادم معين:

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

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

قائمة خوادم AMP

هناك أيضًا واجهة برمجة تطبيقات متاحة للحصول على قائمة بجميع خوادم AMP الرسمية. يكون هذا مفيدًا جدًا عند تنفيذ CORS في الخلفية:

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

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

في بعض الأحيان، تحتاج إلى تحديث أو حذف مستند AMP بسرعة من خادم AMP. يصبح استخدام واجهة برمجة تطبيقات AMP Update Cache API عبر واجهة سطر الأوامر بسيطًا جدًا: 

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

بالطبع، هناك أيضًا إصدار واجهة برمجة تطبيقات متاح كجزء من حزمة toolbox-update-cache.

CORS لـ AMP

بالحديث عن CORS، تستفيد العديد من مكونات AMP (مثل amp-list أو amp-state) من استخدام طلبات CORS للاستفادة من نقاط النهاية البعيدة. جزء من صندوق أدوات AMP هو برنامج وسيط سريع/سهل يضيف تلقائيًا جميع رؤوس CORS المطلوبة لصفحات AMP. ما عليك سوى إضافة برنامج وسيط صندوق الأدوات - cors إلى تطبيقك السريع، ويمكنك نسيان CORS عند تقديم صفحات AMP:

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. يسرد المثال التالي جميع السمات الصالحة لعنصر 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 على منصة Easy Treasure Cloud Intelligent Website، حيث يمكنك إنشاء موقع في 3 دقائق، ونشره بسرعة على خوادم عالمية، وجربه مجانًا. للاستفسارات، اتصل بالخط الساخن: 4006552477 أو 15600002121