Учебники

Google AMP — Введение

Ноябрь 8, 2018

Google Accelerated Mobile Pages (Google-AMP) — это новый проект Google с открытым исходным кодом, специально разработанный для создания облегченных веб-страниц с использованием amp html. Основная цель этого проекта — убедиться, что код AMP работает нормально и быстро загружается на все возможные устройства, такие как смартфоны и планшеты.

AMP — это просто расширение стандартного HTML. Немного HTML-тегов были изменены, и AMP добавил ограничения на их использование. В этой главе мы перечислим html-теги, которые были изменены, и ограничения, добавленные к ним. Теги, связанные с загрузкой внешних ресурсов, например изображений, CSS, JS, отправка форм, видео, аудио и т. Д., Изменены.

Также есть много новых функций, добавленных в amp, например amp-date-picker, amp-facebook, amp-ad, amp-analytics, amp-ad, amp-lightbox и многое другое, которые можно использовать непосредственно на HTML-страницах. Остальные, которые предназначены для отображения, используются как есть.

Со всеми этими изменениями и новыми функциями AMP обещает обеспечить более быструю загрузку и лучшую производительность для страниц при использовании в реальной среде.

Когда вы что-то ищете в поиске Google на своем мобильном устройстве, в верхней части карусели Google отображаются в основном страницы с усилителями, как показано ниже.

Ускоренные мобильные страницы

Когда вы нажимаете на страницу AMP, URL-адрес, который вы получаете в адресной строке, выглядит следующим образом: 

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms

Адресная строка усилителя

URL-адрес не поступает напрямую от издателя, но Google указывает его на свою собственную копию на сервере Google, которая является кэшированной версией и помогает быстрее отображать контент по сравнению со страницей без усилителя. Это произойдет только на устройствах или в режиме эмулятора Google.

Пример страницы усилителя

Пример страницы усилителя показан ниже — 

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.html">
      <meta name = "viewport" content = "width = device-width,
         minimum-scale = 1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      
      <script async src = "https://cdn.ampproject.org/v0.js"></script>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

Что можно и нельзя делать на странице AMP

Давайте поймем, что нужно делать, а что нельзя, программист должен следовать на странице AMP.

Обязательные теги

Есть несколько обязательных тегов, которые должны быть включены в страницу усилителя, как указано ниже —

  • Мы должны убедиться, что к тегу html добавлен amp или as, как показано ниже —

Мы должны убедиться, что к тегу html добавлен amp или as, как показано ниже — 

<html amp>
   OR
<html ⚡>

  • Теги <head> и <body> должны быть добавлены на html-страницу.

  • Следующие обязательные метатеги должны быть добавлены в раздел заголовка страницы; в противном случае произойдет сбой для проверки усилителя.

Теги <head> и <body> должны быть добавлены на html-страницу.

Следующие обязательные метатеги должны быть добавлены в раздел заголовка страницы; в противном случае произойдет сбой для проверки усилителя. 

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

  • Ссылка rel = «canonical» будет добавлена ​​внутри тега head

Ссылка rel = «canonical» будет добавлена ​​внутри тега head 

<link rel = "canonical" href = "./regular-html-version.html">

  • Бирка стиля с усилителем-шаблоном —

Бирка стиля с усилителем-шаблоном — 

<style amp-boilerplate>
   body{
      -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

  • Noscript тег с усилителем-образцом —

Noscript тег с усилителем-образцом — 

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

  • Очень важен тег сценария amp с добавленной асинхронностью, как показано ниже —

Очень важен тег сценария amp с добавленной асинхронностью, как показано ниже — 

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

  • Если вы хотите добавить пользовательский CSS на страницу, пожалуйста, отметьте здесь, что мы не можем вызвать внешнюю таблицу стилей на страницах усилителя. Чтобы добавить пользовательский CSS, весь ваш CSS должен идти здесь, как показано на рисунке —

Если вы хотите добавить пользовательский CSS на страницу, пожалуйста, отметьте здесь, что мы не можем вызвать внешнюю таблицу стилей на страницах усилителя. Чтобы добавить пользовательский CSS, весь ваш CSS должен идти здесь, как показано на рисунке — 

<style amp-custom>
   //all your styles here
</style>

  • К тегу style должен быть добавлен атрибут amp-custom.

К тегу style должен быть добавлен атрибут amp-custom.

Скрипты для компонентов AMP

Обратите внимание, что сценарии с src и type = ”text / javascript” строго запрещены на странице amp. Только заголовки сценариев, которые асинхронны и связаны с компонентами amp, могут быть добавлены в раздел head.

В этом разделе перечислены несколько сценариев, используемых для компонентов усилителя, как указано ниже —

Усилитель-объявления 

<script async custom-element = "amp-ad" 
   src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>

амп-IFrame 

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

Обратите внимание, что скрипт имеет атрибут async и custom-element с именем загружаемого компонента amp. Amp проверяет теги сценариев на основе асинхронных свойств и свойств пользовательских элементов и не позволяет загружать другие сценарии. Требуется type = application / json, который мы добавили в пример файла, как показано ниже 

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

Приведенный выше сценарий может использоваться с другими компонентами amp, если требуется, например, для amp-analytics.

HTML-теги

До сих пор мы видели обязательные теги, необходимые на странице усилителя. Теперь мы обсудим элементы HTML, которые разрешены / запрещены, и ограничения, наложенные на них.

Вот список HTML-тегов, которые разрешены / запрещены —

Sr.No HTML тег и описание
1

IMG

Этот тег заменен на amp-img. Использование прямого тега img на странице AMP запрещено

2

видео

Заменено на усилитель-видео

3

аудио

Заменено на усилитель-аудио

4

IFrame

Заменено на amp-iframe

5

объект

Не положено

6

встраивать

Не положено

7

форма

Может использоваться как <form>. Нам нужно добавить скрипт для работы с формой на странице AMP.

Пример — 

<script async custom-element = "amp-form"
   src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
8

Элементы ввода 

Allowed.<input[type = image]>, 
<input[type = button]>,
<input[type = password]>, 
<input[type = file]> 
are not allowed
9

<FIELDSET>

Позволил

10

<метка>

Позволил

11

P, div, header, footer, section

Позволил

12

кнопка

Позволил

13

Тег <a> допускается при следующих условиях, href не должен начинаться с javascript. Если присутствует целевой атрибут, значение должно быть _blank.

14

SVG

Не положено

15

мета

Позволил

16

Ссылка на сайт

Позволил. Но не позволяет загрузить внешнюю таблицу стилей.

17

стиль

Позволил. Он должен иметь атрибут amp-шаблон или атрибут custom-custom.

18

база

Не положено

19

NoScript

Allowedd

IMG

Этот тег заменен на amp-img. Использование прямого тега img на странице AMP запрещено

видео

Заменено на усилитель-видео

аудио

Заменено на усилитель-аудио

IFrame

Заменено на amp-iframe

объект

Не положено

встраивать

Не положено

форма

Может использоваться как <form>. Нам нужно добавить скрипт для работы с формой на странице AMP.

Пример —

Элементы ввода

<FIELDSET>

Позволил

<метка>

Позволил

P, div, header, footer, section

Позволил

кнопка

Позволил

Тег <a> допускается при следующих условиях, href не должен начинаться с javascript. Если присутствует целевой атрибут, значение должно быть _blank.

SVG

Не положено

мета

Позволил

Ссылка на сайт

Позволил. Но не позволяет загрузить внешнюю таблицу стилей.

стиль

Позволил. Он должен иметь атрибут amp-шаблон или атрибут custom-custom.

база

Не положено

NoScript

Allowedd

Комментарии

Условные html комментарии не допускаются. Например — 

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

HTML события

События, которые мы используем на html-страницах, таких как onclick, onmouseover, не допускаются на странице AMP.

Мы можем использовать события следующим образом — 

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

Вот пример события, используемого на элементе ввода — 

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

Используемое событие прокручивается вводом.

Классы

Вы не можете иметь классы на своих страницах с таким префиксом, как -amp- или i-amp- . Кроме того, вы можете использовать имя класса согласно вашему требованию.

Идентификаторы

У вас не может быть идентификаторов для ваших HTML-элементов с префиксом -amp или i-amp-. Кроме того, вы можете использовать идентификаторы для вашего элемента HTML в соответствии с вашими требованиями.

связи

Использование JavaScript для href не допускается на страницах с усилителями.

пример 

<a href = "javascript:callfunc();">click me</a>

Таблицы стилей

Внешние таблицы стилей не допускаются на странице AMP. Можно добавить стили, необходимые для страницы внутри — 

<style amp-custom>
   //all your styles here
</style>

К тегу style должен быть добавлен атрибут amp-custom .

@ -правила

Следующие @-правила допускаются в таблицах стилей —

  • @ font-face, @keyframes, @media, @page, @ поддерживает. @ импорт не будет разрешен. Поддержка же будет добавлена ​​в будущем.

  • @keyframes разрешено использовать внутри <style amp-custom > . Если @keyframes слишком много, будет хорошо создать тег <style amp-keyframes> и вызвать этот тег в конце документа amp.

  • Имена классов, идентификаторы, имена тегов и атрибуты не должны начинаться с префикса -amp- и i-amp-, так как они внутренне используются в коде усилителя, что может вызвать конфликты, если они также определены на странице во время выполнения.

  • ! Важное свойство не допускается внутри стиля, так как amp хочет контролировать размер элемента при необходимости.

@ font-face, @keyframes, @media, @page, @ поддерживает. @ импорт не будет разрешен. Поддержка же будет добавлена ​​в будущем.

@keyframes разрешено использовать внутри <style amp-custom > . Если @keyframes слишком много, будет хорошо создать тег <style amp-keyframes> и вызвать этот тег в конце документа amp.

Имена классов, идентификаторы, имена тегов и атрибуты не должны начинаться с префикса -amp- и i-amp-, так как они внутренне используются в коде усилителя, что может вызвать конфликты, если они также определены на странице во время выполнения.

! Важное свойство не допускается внутри стиля, так как amp хочет контролировать размер элемента при необходимости.

Пользовательские Шрифты

Таблица стилей для пользовательских шрифтов допускается на страницах AMP.

пример 

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

Шрифты заносятся в белый список от следующих источников, которые можно использовать на страницах AMP.

  • Fonts.com — https://fast.fonts.net

  • Google Fonts — https://fonts.googleapis.com

  • Прекрасный шрифт — https://maxcdn.bootstrapcdn.com

  • Typekit — https://use.typekit.net/kitId.css (замените kitId соответственно)

Fonts.com — https://fast.fonts.net

Google Fonts — https://fonts.googleapis.com

Прекрасный шрифт — https://maxcdn.bootstrapcdn.com

Typekit — https://use.typekit.net/kitId.css (замените kitId соответственно)

Примечание. Пользовательские шрифты @ font-face допускаются на страницах с усилителями.

пример 

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

AMP Runtime

Среда выполнения Amp определяется после загрузки файла ядра Amp — 

<script async src = "https://cdn.ampproject.org/v0.js"></script>

Основной файл заботится о загрузке внешних ресурсов, определяет приоритетность их загрузки, а также помогает в проверке документа amp, когда к разработке URL-адреса amp добавляется # development = 1.

пример 

http://localhost:8080/googleamp/amppage.html#development=1

Приведенный выше URL-адрес при выполнении в браузере выведет список ошибок, если не удалось выполнить проверку усилителя, или отобразит сообщение об успешной проверке усилителя, если ошибок нет.

AMP Компоненты

В Amp добавлено много компонентов. Они в основном используются для эффективной загрузки ресурса. Он также содержит компоненты для обеспечения анимации, отображения данных, отображения рекламы, социальных виджетов и т. Д.

В AMP есть 2 типа компонентов.

  • Встроенный
  • внешний

Примечание. <Amp-img> — это встроенный компонент, который доступен, если добавлен основной файл amp js. Внешние компоненты, такие как <amp-ad>, <amp-facebook>, <amp-video> и многие другие, нуждаются в соответствующем js-файле, связанном с добавляемым компонентом.

Общие атрибуты

Такие атрибуты, как ширина, высота, макет, заполнитель и запасной вариант, будут доступны практически для всех доступных компонентов AMP. Эти атрибуты очень важны для любого компонента AMP, так как он определяет отображение компонента на странице AMP.

Все перечисленные выше функции, перечисленные для AMP, подробно обсуждаются в последующих главах этого руководства.

Обратите внимание, что все примеры в этом руководстве протестированы для устройств и используют режим эмулятора Google для мобильных устройств. Давайте узнаем об этом подробнее сейчас.

Google Mobile Emulator

Чтобы использовать мобильный эмулятор Google, откройте браузер Chrome, щелкните правой кнопкой мыши и откройте консоль разработчика, как показано ниже —

Google Mobile Emulator

Мы можем увидеть инструмент разработчика для Chrome, как показано выше. Нажмите на ссылку, которую вы хотите проверить в браузере. Обратите внимание, что страница отображается в режиме рабочего стола.

Инструмент разработчика

Чтобы получить вышеуказанную страницу для тестирования устройств, нажмите на панель инструментов устройства, как показано ниже —

Переключить панель инструментов устройства

Вы также можете использовать сочетание клавиш Ctrl + Shift + M. Это изменит режим рабочего стола на режим устройства, как показано ниже —

режим рабочего стола

Список устройств можно увидеть, как показано ниже —

Список устройств

Вы можете выбрать устройство, которое вы хотите проверить страницу. Обратите внимание, что все страницы в этих руководствах проверены на эмуляторе Google для мобильных устройств, как показано выше. Та же функция доступна и для Firefox, и для последних браузеров Internet Explorer.

56
Share: