Хабрахабр

Используем AMP как библиотеку общего назначения для создания быстрых динамических сайтов

И я говорю не только о людях. Изменить первое впечатление очень трудно. И потом несмотря на годы развития, новые возможности и устранение старых недостатков, в массовом сознании технология остается той самой несовершенной, своей первой версией. Технологии также часто становятся заложниками первого впечатления — своей первой версии. Тем, кто не пытается бороться с такого рода когнитивными искажениями, остаётся только смотреть на успехи конкурентов, использующих знакомые технологии в новых сценариях, с немым вопросом: "А что, так можно было!?".

Многие разработчики воспринимают AMP как способ положить статический контент своего сайта (статьи, новости, заметки и т.д.) в кэш Google, чтобы при открытии из поиска этот контент загружался мгновенно (о высокой скорости загрузки AMP страниц свидетельствует иконка молнии в результатах поиска :)). Наиболее ярким примером технологии, которая шагнула далеко вперёд по сравнению с тем, чем она была в самом начале, на мой взгляд является AMP — Accelerated Mobile Pages. Но AMP — это гораздо больше чем просто технология для работы со статическим контентом или кэшем Google. Естественно, если вам нужно добиться именно такого результата, то с AMP это сделать будет очень легко. С этой точки зрения AMP можно поставить в один ряд с Polymer, React или Angular. AMP уже давно используется как библиотека общего назначения, основанная на web компонентах, для создания быстрых динамических страниц и даже сайтов целиком, на которые пользователи попадают как из поиска, так и из других источников, включая прямые заходы. Естественно с оглядкой на то, что AMP предназначена для простых (чтобы это не значило) сайтов, где основной упор делается на контент, а динамическая составляющая ограничена.

Сайт проекта — ampproject.org является замечательным примером того, что можно сделать с AMP для десктопа. Отдельно хочется отметить, что несмотря на название — Accelerated Mobile Pages, AMP может использоваться для создания любых сайтов, как десктопных, так и мобильных.

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

Как выглядит готовый лендинг вы можете увидеть на гифке выше.

В основном эти статьи концентрируются на одной стороне технологии AMP, а именно на кэше. AMP посвящено множество статей, среди которых можно встретить весьма критические. Пользователи как бы идут в обход вашего сайта. Ведь если страница сайта кладётся в кэш, и потом при клике из поиска открываются не напрямую, то это неизбежно накладывает ограничения. Может быть выгоднее всегда отдавать контент напрямую? Возникает сакраментальный вопрос: кому это выгодно? Главной проблемой кэша, является то, что в адресной строке браузера пользователь видит не адрес самого сайта, на котором размещаются AMP страницы, например www.vedomosti.ru, а адрес в кэше, в данном случае он будет таким: www.google.com/amp/s/www.vedomosti.ru. Судя по тому что AMP активно используется издателями контента, большей части из них точно выгодно использовать кэш — их сайты из поиска открываются мгновенно.

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

В случае если основной актив — это статьи или новости, то для любого издателя важно как и кому они показываются. С другой стороны проблема с кэшем если и актуальна, то в первую очередь для издателей контента. Отсюда и множество споров по этой теме. И то, что издатели поначалу настороженно относились к AMP, вполне объяснимо. Для владельца интернет магазина, сайта по продаже билетов на концерты, банка, принимающего заявки на выпуск кредитных карт, или салона красоты, осуществляющего запись клиентов, в первую очередь важно чтобы клиенты приходили и покупали. С другой стороны электронная коммерция — это совершенно другой сценарий работы. И если есть технология, которая поможет сделать сайты быстрее, повысив благодаря этому конверсию, то использовать такую технологию будет, естественно, выгодно. Важна конверсия.

Быстрыми их делаете вы, разработчики! Что делает сайты быстрыми? Существует набор лучших практик и трюков, позволяющих создавать сайты, которые быстро загружаются, а также быстро работают. Никакой магии нет, быстрые сайты быстры потому, что их разработчики заботятся о производительности и работают над тед тем чтобы сделать сайты лучше. Также стоит ограничить общее количество загружаемых ресурсов, использовать асинхронные скрипты и т.д. Например, лучше загружать тяжёлые картинки только в тот момент, когда пользователь к ним прокручивает, а не сразу при открытии страницы. Это сложно. Проблема только в том, что все эти практики нужно запомнить, держать в голове, а также постоянно контролировать их применение. Всегда есть соблазн сделать что-то, что не будет соответствовать лучшим практикам, но будет проще в реализации.

А сделать сайт при помощи AMP медленным — трудно. AMP — это технология, с помощью которой легко делать правильно (и в итоге получить быстрый сайт). В случае если страница проходит валидацию, она может быть положена в кэш. Это достигается благодаря набору ограничений, а также валидатору, который эти ограничения проверяет. Не нужно быть экспертом в оптимизации чтобы с помощью AMP получить хороший результат. То есть AMP вас намеренно ограничивает — и это основная идея данной технологии, но взамен у вас появляется уверенность в том, что вы используете лучшие практики. Лучшие практики используются по-умолчанию, а возможности для ошибок сведены к минимуму.

С AMP вы используете обычную HTML разметку, а также CSS стили. При этом AMP — это не какой-то другой вид HTML, это обычная библиотека, в которой нет ничего, что не было бы доступно создателям других библиотек. На AMP можно сделать сайт целиком, если он достаточно прост (типичный пример — всевозможные лендинги), а если возможностей AMP станет недостаточно, всегда можно добавить не-AMP страницы.

В любом случае, даже если вы по каким-то причинам решили не использовать AMP, имеет смысл хотя бы изучить то, как эта библиотека работает и что делает, чтобы применять эти подходы на своих сайтах. С другой стороны оптимизации, применяемые в AMP, можно делать и без AMP, но это потребует больших усилий и времени. Но это не так: иметь производительный сайт гораздо важнее, чем использовать ту или иную библиотеку или фреймворк. Может сложиться впечатление, что продвижение AMP — это продвижение конкретной библиотеки, а не производительности сайтов как таковой.

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

Самое главное ограничение — страницы не могут содержать произвольный JavaScript код. Какие же ограничения накладывает AMP? Также нельзя подключать внешние JavaScript и CSS файлы. Единственно, для чего можно использовать ограниченный JavaScript — это связывание данных. Весь CSS должен быть на самой странице, а его объем ограничен 50-ю килобайтами. Исключения есть: это сама библиотека AMP, а также перечень одобренных компонент (вы можете принять участие в разработке AMP и создать свои компоненты). Например, вместо <img/> применяется компонент <amp-img/>. Кроме того нельзя использовать часть HTML тэгов, таких как <img/>, вместо них используются web-компоненты, входящие в поставку AMP. Также есть небольшие ограничения на CSS, вызванные соображениями производительности (нельзя использовать модификатор !important и не GPU-ускоренные анимации). Это необходимо, для того чтобы AMP мог контролировать загрузку ресурсов. AMP предоставляет богатый набор компонент, что отчасти нивелирует невозможность написания произвольного JavaScript кода. Собственно это всё. А в совсем крайних случаях, когда нет другого выхода, можно использовать iframe’ы c не-AMP содержимым. Набор компонент включает например amp-date-picker, amp-sidebar, amp-user-notification, amp-facebook-like, amp-access, с помощью которого можно реализовать поддержку аутентификации, и многие-многие другие.

Кроме того, полезно заглянуть на сайт ampbyexample.com, где собраны прекрасные примеры, большую часть из которых можно практически без изменений использовать в реальных проектах. Перед началом работы с AMP, я рекомендую изучить документацию на сайте проекта — ampproject.org. Если вам требуются готовые шаблоны, то они доступны на сайте ampstart.com.

Наши товары будут загружаться динамически. Давайте создадим лендинг страницу интернет магазина велосипедов со списком товаров, фильтрацией и поиском. Код проекта, можно найти на GitHub: https://github.com/spugachev/amp-article В целях обучения мы не будем использовать готовые шаблоны, а сделам всё с нуля.

Для запуска проекта необходимо клонировать репозиторий и выполнить следующие команды в папке проекта (должен быть установлен Node.js). Репозиторий содержит backend на Node.js, а также AMP страницы, которые находятся в папке public.

>> npm install
>> npm start

Шаблон страницы

Ее код представлен ниже. Создадим минимальную AMP страницу. В проекте, который вы скачали с GitHub, главная страница public/index.html намеренно оставлена пустой, ее мы и будем использовать для написания кода.

<!doctype html>
<html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Магазин Велосипедов</title> <link rel="canonical" href="http://amp-bike-shop.com/index.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body@-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> <style amp-custom> /* разместите ваши стили здесь */ </style> </head> <body> <h2>Добро пожаловать в AMP магазин велосипедов!</h2> </body>
</html>

Достигается это либо добавлением символа молнии в тег html (к сожалению символ молнии Хабр вырезает), либо добавлением слова "amp" туда-же. Первое, что бросается в глаза в приведенном выше примере — HTML разметка содержит явное указание на то, что это AMP страница. Без такого указания страница не будет проходить валидацию, и не будет добавлена в кэш Google при индексировании.

Далее необходимо подключить JavaScript библиотеку AMP:

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

Если существует не-AMP версия страницы, то указывается ее адрес. Также надо указать канонический адрес страницы. В противном случае указывается адрес самой AMP страницы.

<link rel="canonical" href="http://amp-bike-shop.com/index.html">

Данные стили нельзя менять. Кроме того, необходимо добавить meta тег для задания масштабирования, а также шаблонные CSS стили. В случае если библиотека по каким-то причинам не загрузится, контент в любом случае будет показан через восемь секунд. Они нужны для того чтобы при загрузке страницы, но до загрузки JavaScript библиотеки AMP, на экране не мигал не стилизованный контент.

Благодаря заданию параметра layout="responsive", изображение будет растянуто на всю ширину контейнера. Разместим в верхней части страницы изображение с помощью компонента amp-image.

<amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive">
</amp-img>

Итак... Здесь и далее я не буду приводить CSS стили, и их можно найти в репозитории проекта на GitHub.

Если к адресу страницы добавить параметр #development=1, то страница будет автоматически валидироваться, а информация об этом будет выведена на консоль браузера. Запустите проект и откройте главную страницу в браузере. Для этих же целей можно использовать расширение для Chrome под названием AMP Validator.

Например, если бы вместо <amp-img/> использовался обычный тег <img/>, то такая страница не прошла бы валидацию, о чём было бы показано соответствующее сообщение.

Загрузка и отображение данных

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

GET /api/bikes [ { "id":1, "img":"img/01.jpg", "title":"Первый велосипед", "price":"28500", "available":false }, { "id":2, "img":"img/02.jpg", "title":"Второй велосипед", "price":"14750", "available":true }, { "id":3, "img":"img/03.jpg", "title":"Третий велосипед", "price":"31200", "available":true }, … ]

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

  • amp-bind для поддержки связывания данных (data binding),
  • amp-mustache для работы с шаблонами в mustache формате
  • а также amp-list для работы со списком, который будет загружать и отображать данные.
    Подключим необходимые файлы в заголовке страницы:

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

Добавим на страницу компонент списка:

<amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" items="."> <div placeholder>Загрузка...</div> <div fallback>Ошибка загрузки товаров.</div> <template type="amp-mustache"> <div class="card" style="height: 340px;"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}}<p>В наличии</p>{{/available}} {{^available}}<p>Нет в наличии</p>{{/available}} <p>{{price}} рублей</p> </div> </template> </amp-list>

Так как у нас сам ответ является массивом, то значение свойства items указывает на корень ответа. Для компонента задано свойство src, которое определяет откуда будут браться данные (в нашем случае будет выполнен GET запрос по адресу “//localhost:3000/api/bikes”), а также свойство items, которое позволяет искать массив элементов для списка внутри JSON ответа от сервера.

Но самое интересное — это, конечно, шаблон элементов списка. Далее мы определяем заглушку, которая будет показываться на время загрузки данных, а также заглушку на случай ошибки. Формат шаблона очень прост, думаю синтаксис mustache шаблонов не требует дополнительных пояснений.

Простой разметкой и без написания JavaScript кода — мы выполнили загрузку данных и отобразили данные на странице (с помощью списка и шаблона). Добавьте приведенный выше код, обновите страницу и посмотрите на список товаров, выведенный на страницу.

Фильтрация данных

Его можно рассматривать как объект с иерархией свойств. Каждая AMP страница имеет состояние. Состояние страницы можно изменять в обработчиках событий с помощью функции AMP.setState.

Для этого разместим на странице чекбокс, по клику на который, будем изменять состояние страницы, присваивая переменной onlyAvailable значение (в соответствии с тем выбран чекбокс или нет). Добавим фильтр, позволяющий отображать только велосипеды, которые есть в наличии. Обратите внимание, что AMP реализует свой способ обработки событий. Название переменной — произвольное, её можно было бы назвать как угодно. Можно обрабатывать сразу несколько событий, и для каждого события можно иметь несколько действий.

<label> <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })"/>Показывать только в наличии
</label>

Для того чтобы библиотека AMP могла производить такое связывание, имя свойства, которое должно получить значение, необходимо взять в квадратные скобки — [ ]. Механизм связывания данных позволяет производить связывания переменных состояния страницы со значениями свойств в HTML разметке. Например, мы будем добавлять или убирать CSS класс ‘active’ (это нестандартный класс и он задается нами) в зависимости от значения переменной onlyAvailable.

<label [class]="onlyAvailable? 'active' : ''" >

В режиме разработки (#development=1) состояние страницы можно вывести на консоль браузера с помощью функции AMP.printState();

Для этого воспользуемся отдельным компонентом amp-state. Добавим теперь к состоянию страницы список товаров. Кроме того, добавим макрос, который при изменении значения переменной onlyAvailable будет производить фильтрацию списка товаров. Компонент будет загружать данные из того-же источника что и amp-list, но повторной загрузки не произойдет, так как AMP контролирует загрузку данных и позволяет избежать лишних запросов.

<amp-state id="bikes"
src="//localhost:3000/api/bikes">
</amp-state> <amp-bind-macro id="filteredBikes"
expression="bikes.filter(bike => onlyAvailable ? bike.available : true)">
</amp-bind-macro>

Для этого свяжем свойство src компонента с макросом filteredBikes. Теперь воспользуемся отфильтрованным списком как источником данных для компонента amp-list. Это необходимо, так как высота компонента amp-list автоматически под количество элементов подстраиваться не будет. А также свяжем свойство высоты компонента с количеством элементов. В данном примере число 340 — это высота карточки товара, а 16 — отступы сверху и снизу.

<amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items=".">

Убирать ее нельзя. Обратите внимание на то, что явная загрузка данных с помощью задания свойства src="//localhost:3000/api/bikes" осталась. Оно будет выполнено только после действий пользователя, таких как нажатие на чекбокс. При загрузке AMP страницы по соображением производительности связывание данных автоматически не выполняется.

Откройте получившуюся страницу и проверьте, что фильтрация работает корректно.

Поиск

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

<input type="text" placeholder="поиск" id="query" autocomplete="off"
on="input-debounced: AMP.setState({ query: event.value
})" />

Для выполнения поиска товаров нужно добавить параметр “q” к уже знакомому нам GET запросу. Backend в нашем проекте поддерживает поиск. Мы не будем останавливаться на реализации серверной части, а посмотрим, как выполнить новый запрос к серверу при изменении состояния страницы.

При изменении переменной query состояния страницы, будет выполняться новый поисковый запрос. Выполним связывание данных для параметра src компонента amp-state, который уже использовался нами для получения начальных данных для фильтрации.

<amp-state id="bikes" src="//localhost:3000/api/bikes"
[src]="query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'">
</amp-state>

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

<body>
<amp-img class="hero-img" src="img/hero.jpg" width="320" height="213" layout="responsive">
</amp-img> <div class="content"> <h2>Добро пожаловать в AMP магазин велосипедов!</h2> <amp-state id="bikes" src="//localhost:3000/api/bikes" [src]= "query ? '//localhost:3000/api/bikes?q=' + query : '//localhost:3000/api/bikes'"> </amp-state> <amp-bind-macro id="filteredBikes" expression="bikes.filter(bike => onlyAvailable ? bike.available : true)"> </amp-bind-macro> <input type="text" placeholder="поиск" id="query" autocomplete="off" on="input-debounced: AMP.setState({ query: event.value })" /> <label [class]="onlyAvailable? 'active' : ''" > <input type="checkbox" on="change:AMP.setState({ onlyAvailable: event.checked })" />Показывать только в наличии </label> <amp-list class="offers" height="3720" layout="fixed-height" src="//localhost:3000/api/bikes" [src]="filteredBikes()" [height]="(340 + (16*2)) * filteredBikes().length" items="."> <div placeholder>Загрузка...</div> <div fallback>Ошибка загрузки товаров.</div> <template type="amp-mustache"> <div class="card"> <amp-img height="200" layout="fixed-height" src="{{img}}" alt="{{title}}-{{price}}"> </amp-img> <hr/> <h2>{{title}}</h2> {{#available}} <p>В наличии</p>{{/available}} {{^available}} <p>Нет в наличии</p>{{/available}} <p>{{price}} рублей</p> </div> </template> </amp-list>
</div>
</body>

Выполнили установку и изменение состояния страницы, научились работать с шаблонами, а также реагировать на пользовательский ввод. Итог: мы создали интерактивную AMP страницу с поддержкой загрузки и связывания данных. Попробуйте теперь сказать что AMP — это для статики ;). Как видите, AMP прекрасно позволяет разрабатывать интерактивные динамические страницы, даже, не смотря на серьёзные ограничения в применении JavaScript. Мы знаем, что AMP может намного больше!

Когда вы отдаёте AMP страницы с вашего сайта напрямую, то, естественно, никаких дополнительных оптимизаций не производится. При загрузке AMP страниц в кэш и отдаче их из кэша, Google проводит множество оптимизаций. Она предоставляет в том числе middleware для Express, поэтому обычно использование AMP Toolbox вместе с Node.js — вопрос добавления нескольких строк кода. Если вы хотите ускорить прямую отдачу AMP страниц, воспользуйтесь библиотекой AMP Toolbox. При этом скорость загрузки страниц увеличивается!

Аналитика

Как вы сможете сказать улучшился ли пользовательский опыт с внедрением AMP, если у вас нет никакой информации о пользовательском опыте? Если вы не собираете статистику по использованию вашего сайта, то бессмысленно вносить какие-либо изменения — у вас не будет четкой картины, были ли изменения позитивными, негативными или нейтральными. Поэтому внедрение аналитики жизненно необходимо.

Также компонент amp-experiment позволяет проводить A/B тесты на AMP страницах. AMP поддерживает два основных компонента для сбора данных: amp-pixel для установки простого пикселя и amp-analytics для более сложных решений аналитики.

С помощью amp-analytics вы можете подключить Google Analytics, Яндекс Метрику и другие провайдеры (например Baidu Analytics).

Сначала необходимо подключить соответствующую библиотеку с компонентом amp-analytics. Добавить аналитику на страницу очень просто.

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

Для Google Analytics это будет выглядеть следующим образом. И далее поместить компонент на страницу и настроить параметры.

<amp-analytics type="googleanalytics"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script>
</amp-analytics>

Для Яндекс Метрики код очень похож.

<amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "XXXXXX" } } </script>
</amp-analytics>

Для любого аналитического решения необходимо задать в настройках какие именно данные вы хотите собирать. Естественно это самые минимальные настройки.

Хочется чтобы id пользователей везде были одинаковыми. При использовании компонента amp-analytics возникает проблема с отслеживанием пользователей на AMP и не AMP страницах. Для этого необходимо использовать Client ID API. Чтобы пользователь, загрузивший вашу страницу из кэша Google, а потом перешедший по ссылкам на ваш сайт напрямую, с точки зрения аналитики считался бы одним и тем-же пользователем. Более подробно о том, какие настройки необходимо сделать, написано в справке Google Analytics.

Service Worker’ы и PWA (Progressive Web Apps)

Поэтому обычно те страницы, на которые пользователи попадают из внешних источников (страницы входа), делают AMP страницами. В случае достаточно сложных сайтов, а также уже существующих сайтов, будет трудно написать или вообще переписать все на AMP. Но дальше, когда пользователь кликнет на ссылку на AMP странице, он попадет на ваш основной сайт. Они будут быстро открываться как из кэша, так и напрямую. Достичь этого позволяет механизм сервис воркеров (Service Workers). И тут важно, чтобы основной сайт при переходе с AMP страницы грузился мгновенно. Благодаря этому ссылки на AMP странице будут открываться мгновенно, так как всё или почти всё, что нужно для открытия следующих страниц, уже будет находиться в кэше. При открытии AMP страницы, она должна установить сервис воркер для основного сайта, а сервис воркер в свою очередь выполнит загрузку и кеширование необходимых файлов.

Подключается он таким-же способом, как и все остальные AMP компоненты. Для установки сервис воркера используется компонент amp-install-serviceworker.

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

Пример его использования представлен ниже.

<amp-install-serviceworker src="/sw.js" data-iframe-src="https://mydomain.com/sw.html" layout="nodisplay">
</amp-install-serviceworker>

Но в случае загрузки AMP страницы из кеша, он не сможет это сделать, так как установка сервис воркеров для других доменов запрещена. Если пользователь зайдет на ваш сайт напрямую, компонент установит сервис воркер, заданный параметром src. При загрузке из кеша, amp-install-serviceworker откроет страницу в iframe, и сервис воркер будет установлен. Поэтому вам необходимо создать на сайте страницу, на которой будет находиться код установки сервис воркера.

Сердцем PWA являются сервис воркеры. PWA (Progressive Web Apps) — это подход к тому, как надо строить современные web приложения, приближающиеся к нативным по пользовательскому опыту. На самом деле, они дополняют друг друга. Можно встретить мнение, что AMP и PWA в является в какой-то степени конкурентами. При этом AMP концентрируется на первом взаимодействии, когда пользователь приходит извне. PWA концентрируется на длительных и по возможности регулярных взаимодействиях с пользователями. Поэтому очень многие проекты используют AMP как точку входа, которая переводит пользователя в PWA. PWA никак не улучшает именно этот аспект — первое взаимодействие. Если же у вас не предполагаются регулярные, длительные или сложные взаимодействия с пользователем, то можно обойтись и одним AMP. И это очень разумно.

Например, AMPHTML ads — это прекрасный способ создания рекламы, которая быстро грузится. В данной статье мы рассмотрели одно применение AMP, хотя на самом деле есть еще много интересных сценариев. Да и на обычных страницах — медленно загружаемая реклама раздражает пользователей. Ведь если на AMP страницах, открывающихся моментально, будут располагаться медленно загружаемые баннеры, пользователи такую рекламу скорее всего просто не увидят. Поэтому логично саму рекламу (рекламные креативы) делать с помощью AMP.

Например, при чтении с телефона пользователи бросают чтение длинной статьи гораздо раньше, чем при чтении с десктопа (а вы дочитали до этого момента?:)). Пользователи по-разному потребляют контент на десктопе и на мобильных устройствах. На мобильных устройствах в последнее время все более популярен формат историй (stories), и AMP stories как раз и являются способом делать такие истории быстро и без лишних усилий.

Кроме того, сейчас разрабатывается версия AMP для электронной почты (AMPHTML for email), которая позволит создавать красивые интерактивные письма с помощью AMP.

Например если в React или Angular приложении требуется отображать новости, статьи или карточки товара, то их можно хранить в AMP формате, предзагружать и потом мгновенно показывать в web приложении (или даже в нативном приложении). Не забывайте также, что AMP можно использовать просто как формат вставки контента на вашем сайте. Не обязательно использовать AMP для всей страницы целиком — AMP содержимым могут быть и маленькие кусочки контента.

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

Статья является личным взглядом на AMP и может не совпадать с мнением Google или работодателя автора 😉 Сергей Пугачёв, Google Developer Expert
PS.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть