ru ua en
c l o c k
в блог
Progressive Web Apps для продвижения сайта
28 August 2018
блог

Progressive Web Apps для продвижения сайта

О новой технологии, ее преимуществах, недостатках и личных впечатлениях от работы с PWA рассказал фронтенд-разработчик Clock Creative Lab Игорь Гонтаренко.

Progressive Web App (PWA) – новый более удобный и легкий формат приложения. При использовании PWA не отличишь от традиционного нативного. Его выделяют лишь несколько дополнительных достоинств:

  • мгновенно загружается,
  • занимает меньше памяти,
  • не нужно обновлять и скачивать из магазинов IOS App Store или Google Play Store,
  • работает на любых устройствах (даже на старых ПК).

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

Progressive Web App для Mercedes-Benz

Несколько месяцев назад мы разработали и запустили новый сайт для Mercedes-Benz «Автоцентр на Кольцевой». И теперь оптимизировали его под функции прогрессивного веб-приложения.

Прежде чем подробно объяснить многочисленные сильные стороны и поговорить о незначительных недостатках технологии, покажу ее в работе на примере проекта Mercedes-Benz.


Преимущества Progressive Web App

PWA для бизнеса

  1. Упрощение работы и сокращение расходов в три раза. Сделать это позволяет мультиплатформенность – важная составляющая успешной веб-технологии. В нативных приложениях ее обеспечивали отдельные независимые кодовые базы. С PWA больше не нужно тратиться на их создание. Технология имеет единый код и работает на любой платформе, где есть браузер. Доступна даже на старых ПК, но с ограниченным функционалом. Кроме более скромного бюджета на деле это означает, что получить эффективный сайт и приложение компаниям теперь проще. Раньше нужно было нанимать три команды разработчиков для создания: веб-ресурса, нативного приложения под платформу iOS и приложения для Android. Составлять для каждой техническое задание и курировать освоение бюджетов. Так было потому, что для Desktop, iOS и Android необходимо знание разных языков программирования. С появлением PWA достаточно единого ТЗ и одной команды веб-разработчиков. Они создадут сайт и подключат его к прогрессивному интернет-приложению.
  2. Дополнительное SEO-продвижение вашего сайта. Скорость загрузки у PWA выше, чем у веб-ресурса. С лета текущего года Google учитывает этот фактор и первыми в выдаче мобильного поиска показывает более быстрые сайты. Кликабельность также напрямую зависит от времени, затраченного на загрузку.

Так, на хостинге изображений Pintrest в результате сокращения времени ожидания на 40%, трафик увеличился на 15%, а коэффициент конверсии до регистрации – на 15%.

Согласно исследованиям Google о PWA:

  • На 20% увеличилась доля интернет-сеансов на мобильных устройствах после внедрения технологии.
  • На 18% уменьшилась длительность посещений.
  • На 29% вырос коэффициент мобильной конверсии.
  • 53% пользователей скорее закроют сайт, если его загрузка длится более 3х секунд. Минимум 5 секунд занимает скачивание 1МБ при стандартном 3G подключении по данным WebPageTest и DevTools.

Также у прогрессивных веб-приложений лучшие условия конкуренции. Им не приходится, как нативным, соседствовать с тысячами подобных в IOS App Store или Google Play Store. Пользователь может перейти на PWA из соцсетей, поисковой выдачи или мессенджеров.

3. Нет необходимости следовать правилам App Store и Google play, поскольку вам больше не требуются их магазины для размещения своего приложения.

4. Работа только с заинтересованной аудиторией. Установить прогрессивное веб-приложение предлагают только при повторном посещении сайта. Так отсеивается значительная часть «случайных» посетителей.

5. Повышение конверсии за счет push-уведомлений и удобства использования PWA на мобильных устройствах. Более половины интернет-пользователей выходят в сеть через смартфон, согласно данным на первый месяц 2018 года. Клиенты и ваш бизнес станут еще ближе, благодаря уникальным возможностям Progressive Web App.

PWA для пользователей

  1. Мультиплатформенность. Прогрессивное интернет-приложение можно загрузить на любых digital-устройствах в Google Chrome, Opera, Mozilla Firefox и браузерах Microsoft. Нет требований по техническим возможностям и параметрам гаджетов.
  2. Ненавязчивость. Установить PWA предлагают только после того, как вы проявили первичный интерес при первом посещении сайта.
  3. Не нужно скачивать из магазинов. Достаточно один раз нажать на кнопку во всплывающем диалоговом окне.
  4. Моментальная загрузка. «Тяжелые» компоненты кэшируются при первом посещении веб-ресурса.
  5. Мало весит (до 200Kb). Экономно использовать память устройства позволяет применение возможностей браузера.
  6. Доступ в один клик с главного экрана или через push-уведомления. «Пуши» не дадут вам упустить понравившийся товар, когда он появится в наличии. И регулярно будут сообщать о новых продуктах, соответствующих вашим интересам.
  7. Автоматическое обновление. В PWA-приложениях без вашего участия появляются все обновления сайта.
  8. Минимальная скорость загрузки – меньше, чем за секунду.
  9. Работа с сайтом при отсутствии сети. Вы сможете получить доступ к последней версии контента на интересующем веб-ресурсе через Progressive Web App даже оффлайн. В таком режиме откроется сохраненная версия сайта.

Недостатки Progressive Web Apps

Для разработчиков. Единственный недостаток – новизна технологии. Прогрессивные веб-приложения появились всего около года назад. И в сети пока доступно сравнительно мало информации о работе с PWA.

Для пользователей. На браузере Safari в iOS нет простоты работы с приложением «в один клик», как в Google Chrome на Android. Нужно применить больше манипуляций, чтобы установить PWA. Вручную выполняется добавление иконки на рабочий стол. Это отталкивает часть потенциальной аудитории.

Как минимум стоит лучше обыграть всплывающие окна, чтобы естественным способом привести пользователя к целевому действию. Но будет ли это сделано – большой вопрос. PWA является разработкой Google, с которыми Apple и постоянно воюют. И облегчить работу с этим приложением на своей платформе – означает пойти на встречу конкурентам.

Нативные приложения и PWA: когда нужны обе технологии

Многие крупные мировые компании сегодня работают со своими клиентами через два вида приложений – нативные и PWA. Отказ от проверенной технологии в пользу новой пока выглядит слишком рискованным. На этом этапе Progressive Web App выступает неплохой альтернативой нативу. И большие компании, как Uber, Twitter, Starbucks, Aviasales, Google Maps,Tinder, и AliExpress, дают своим клиентам возможность выбирать.

Возможно, скоро Google выпустит сервис, который будет работать только через PWA. Чтобы таким образом показать все преимущества этой технологии. И познакомить с ней тех пользователей, которые еще не успели сделать это.

Эффективность PWA для бизнеса – реальные кейсы компаний


Facebook

+43% интернет-сеансов на одного пользователя

+20% просматриваемость рекламных объявлений

+100% вовлечения

3Х увеличение глубины скроллинга

Lancôme

+17% выше конверсия

+8% возврат к брошенным корзинам через push-уведомления

+53% мобильных сеансов на iOS

MakeMyTrip

+38% быстрее загрузка страницы

+160% сеансов покупателей

3Х выше конверсия

AliExpress

+82% конверсия на iOS

+74% длительность сеансов

2Х больше посещенных страниц для каждого пользователя во всех браузерах

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

Progressive Web App, благодаря достижениям в разработке браузеров, объединили функционал нативного приложения, простоту установки и легкость загрузки сайта. Технология также выступает мощным инструментом seo-продвижения. Сегодня PWA – это прямой путь в смартфон клиента для вашего бизнеса. И его наличие, как показывают кейсы крупнейших мировых компаний, является конкурентным преимуществом.

У тех, кто еще не использует прогрессивные веб-приложения, сейчас есть возможность «впрыгнуть в последний вагон» – заполучить уникальный инструмент развития бизнеса и показать себя, как прогрессивная компания. Эффективность применения Progressive Web App будет сохраняться еще год-полтора и постепенно идти на убыль.

Однако если бюджет компании позволяет заказать разработку сайта с PWA и нативных приложений под разные платформы – полностью переходить на использование новой технологии пока не стоит. Наиболее выигрышной стратегией пока остается иметь полный набор функционала, чтобы вовлечь все сегменты пользователей. Со временем нативные приложения сами изживут себя. Тогда Progressive Web App займут их место и станут основной разработкой. Пока не появятся новые, еще более удобные инструменты.