PWA против AMP: что лучше и чем они отличаются друг от друга?

Примерно через десять лет после появления первого iPhone мобильный Интернет наконец-то догоняет образ жизни своих пользователей. Сжатие и масштабирование были уничтожены адаптивными страницами. AMP и собственные приложения борются с медленной загрузкой…

Но для мобильного Интернета все еще существует серьезная проблема: вовлеченность. 1000 лучших мобильных веб-сайтов посещают в 4 раза больше людей, чем 1000 лучших нативных приложений. Однако эти веб-сайты привлекают пользователей в среднем в 20 раз меньше минут, чем мобильные приложения.

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

Что такое прогрессивные веб-приложения?

Прогрессивные веб-приложения - это мобильные веб-сайты, которые выглядят, работают и работают так же, как нативные мобильные приложения. Пользователи сталкиваются с ними в браузере, как на любом мобильном веб-сайте. После взаимодействия с этим сайтом пользователю предлагается установить веб-приложение на свое устройство. Если они выберут установку, приложение загрузится на устройство так же, как и обычное приложение.

Термин «прогрессивные веб-приложения» был придуман Google в 2015 году. Компания заявляет, что прогрессивные веб-приложения соответствуют трем критериям:

• Надежность - загружайте мгновенно и никогда не показывайте downasaur, даже в неопределенных сетевых условиях.
• Быстро - быстро реагируйте на действия пользователя с помощью плавной анимации и без резкой прокрутки.
• Вовлеченность - почувствуйте себя естественным приложением на устройстве с захватывающим пользовательским интерфейсом.

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

Что такое нативное приложение?

Нативные приложения устанавливаются через торговую площадку, такую ​​как App Store или Google Play, и отображаются в виде значков на главном экране устройства. Они разработаны специально для конкретного устройства и могут использовать все его функции, такие как GPS, камеру, список контактов и многое другое. Это приложения, которые, скорее всего, будут сейчас на вашем устройстве, например Google Maps, Gmail или Instagram.

Что такое AMP?

Проект Accelerated Mobile Pages с открытым исходным кодом (сокращенно AMP) позволяет разработчикам создавать веб-страницы, которые загружаются практически мгновенно с помощью уникального языка программирования. Этот язык представляет собой урезанную версию HTML и CSS, ограничивающую использование JavaScript. Эти страницы размещаются в сети CDN, которая предоставляет кешированную версию страницы при ее посещении пользователем.

Прогрессивные веб-приложения против нативных приложений

Нативные приложения предлагают мгновенный и удобный пользовательский интерфейс, и они поддерживаются крупными торговыми площадками, такими как App Store и Google Play, так зачем выбирать прогрессивное веб-приложение вместо традиционной нативной версии? В статье для Forbes Эндрю Газдеки предлагает высокоуровневое объяснение:

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

Для более подробного объяснения давайте рассмотрим некоторые из самых больших различий между нативными приложениями и прогрессивными веб-приложениями:

• Использование функций: в настоящее время веб-приложения могут использовать функции устройства, а собственные приложения - в большей степени. Такие вещи, как GPS, push-уведомления и жесты, более доступны в собственном приложении.
• Ограничения по содержанию: чтобы дать вашему приложению шанс конкурировать в Google Play или App Store, вам придется подчиниться правилам торговой площадки. Ограничения на контент и сборы затрудняют создание успешных нативных приложений для некоторых веб-сайтов. Однако для веб-приложений не налагаются ни ограничения контента, ни сборы, что упрощает создание приложения для всех, независимо от типа контента.
• Автономное подключение: здесь преимущество принадлежит нативным приложениям, которые предлагают более полное кэширование, чем прогрессивные веб-приложения, построенные на HTML5. Если ваше приложение должно работать в автономном режиме, в настоящее время лучшим выбором будет нативный.
• Установка: установка собственного приложения требует значительных действий от имени пользователя. Им нужно открыть торговую площадку и найти приложение, а затем загрузить его. Должны быть серьезные намерения. При установке прогрессивного веб-приложения гораздо меньше проблем. Добавление одного из них на ваше устройство похоже на создание закладки на главном экране. Установить прогрессивное веб-приложение проще, но процесс менее знаком, что может помешать его раннему внедрению.

• Скорость: в настоящее время прогрессивные веб-приложения отстают от собственных приложений. Однако они постоянно сокращают разрыв. Это особенно верно, если учесть следующее сравнение.

Прогрессивные веб-приложения против AMP

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

• Обнаруживаемость: AMP побеждает в этой битве. AMP получает помощь в виде карусели в результатах поиска Google, где прогрессивные веб-приложения не улучшают возможности обнаружения поисковыми системами.
• Вовлеченность: прогрессивные веб-приложения не ограничиваются использованием AMP HTML или CSS, поэтому они могут включать гораздо более интересный контент, чем AMP. Что-либо интерактивное, для чего требуется JavaScript, нельзя создать с помощью платформы AMP. Для AMP динамический контент исключен.
• Скорость: преимущество здесь у AMP по той же причине, по которой прогрессивные веб-приложения выигрывают у пользователей. AMP может поддерживать только легкий контент, но это ускоряет загрузку.

В Smashing Magazine Пол Бакаус хорошо резюмирует компромисс между двумя форматами:

Чтобы сделать работу надёжно быстрой, вам нужно жить с некоторыми ограничениями при внедрении AMP-страниц. AMP бесполезен, когда вам нужны высокодинамичные функции, такие как push-уведомления или веб-платежи, или что-либо, требующее дополнительного JavaScript.

Кроме того, поскольку страницы AMP обычно обслуживаются из кэша AMP, вы не получите самых больших преимуществ Progressive Web App при первом щелчке, поскольку ваш собственный Service Worker не может работать. С другой стороны, прогрессивное веб-приложение никогда не может быть таким же быстрым, как AMP при первом щелчке, поскольку платформы могут безопасно и дешево выполнять предварительную визуализацию страниц AMP - функция, которая также упрощает встраивание (например, во встроенную программу просмотра).

Но, в конце концов, действительно ли мы должны выбирать одно вместо другого?

Сотрудничество выше конкуренции

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

Сегодня использование AMP вместе с прогрессивными веб-приложениями становится все более распространенным, и разработчики используют оба варианта тремя способами.

1. AMP как прогрессивное веб-приложение

Если ваш контент в основном статичен и вы можете согласиться на ограниченную функциональность AMP, этот вариант позволяет вам создавать молниеносные впечатления от прогрессивного веб-приложения. Например, AMP построен так - прогрессивное веб-приложение, полностью заряженное AMP. У него есть сервисный работник, который обеспечивает автономный доступ, а также манифест, который запрашивает баннер «Добавить на главный экран».

2. AMP для прогрессивного веб-приложения.

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

3. AMP в прогрессивном веб-приложении.

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

Это предполагает использование другой формы AMP, называемой «Shadow AMP», которая позволяет вставлять AMP в область веб-страницы. Результат - AMP в оболочке прогрессивного веб-приложения. Чтобы увидеть это в действии, посмотрите созданную Google демонстрацию под названием ShadowReader:

Готовы создать собственное прогрессивное веб-приложение?

Создание быстрого, похожего на нативное приложение опыта с возможностью обнаружения в Интернете начинается здесь, где вы можете изучить все поля, которые вам нужно проверить, чтобы соответствовать критериям Google для PWA. Чтобы узнать больше об использовании AMP и PWA вместе, посетите:

• Это выступление Бена Морсса
• Это выступление Эрика Линдли

Когда вы будете готовы, начните использовать конструктор целевой страницы AMP в Instapage, чтобы обеспечить максимально быстрое взаимодействие с пользователем.