Всё ушло на front: как PWA меняют правила игры в онлайн-торговле

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

В закладки

Онлайн как двигатель торговли

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

Но и здесь не всё так гладко. Чтобы захватить все каналы конверсии, интернет-магазину приходится вкладываться минимум трижды: разрабатывая сайт, приложение под iOS и приложение под Android. А результат?

Ещё лет 5–7 назад специалисты прогнозировали, что будущее — за мобильными приложениями, а браузер будет собирать жалкие крохи конверсии. Но статистика 2018–2019 годов показывает, насколько они ошибались.

Среднестатистический пользователь скачивает ежемесячно ноль приложений. Среднестатистический пользователь проводит львиную долю своего времени — примерно 85 % — в пяти любимых приложениях.

И это, как правило, соцсети, мессенджеры, видеохостинги. На шопинг остаются считаные байты — около 3 % «мобильного» времени!​

Да и вообще, пользователю проще сказать «Окей, Google» и перейти по ссылке, чем искать что-то в App Store или «Play Маркете».

В результате — новая дилемма. Обычные сайты не создают столько возможностей для повторного касания, как мобильные приложения. Они не «живут» у пользователя на рабочем столе и не напоминают о себе push-уведомлениями. Они дольше грузятся и нестабильно работают при медленном соединении с Интернетом. А приложения не приносят результатов, которые от них ожидают.

Идея Progressive Web Applications (PWA, или прогрессивные web-приложения) на этом фоне не нова. Информационный продукт, который удобен как приложение и прост как сайт, появился уже давно. Но только последние пару лет PWA переживают настоящий расцвет. Причина этой тенденции — в политике корпорации Google, которая задалась целью сделать Chrome самым нужным приложением в мире и поэтому активно «открывает» для браузера новые возможности.

PWA как способ изменить мир e-Commerce

Что такое PWA? Вкратце — это мобильное приложение в браузере. Оно не требует обязательной установки и при этом «наследует» все лучшие качества нативных приложений: привлекательный и быстрый интерфейс, гибкость в разработке, независимость от back'а.

Но добавляет к этому собственные бонусы: легко ищется через тот же Google и «весит» в разы (а то и в десятки раз) меньше, чем обычное приложение.

Пример PWA, перевернувшего продажи

Сеть Starbucks в дополнение к обычному мобильному приложению разработала PWA для сбора заказов. В PWA был реализован привычный для пользователей приложения Starbucks user-friendly интерфейс, но «вес» PWA оказался меньше на 99,84 %. Результат не заставил себя ждать: заказы через мобильный Интернет удвоились и почти сравнялись с заказами через десктоп.

Такой взлёт PWA стал возможен, когда изменились технологии web. То, что раньше казалось принципиально невозможным: работа в офлайне, push-уведомления, вход за один клик, оплата картами и системами Apple Pay и Google Pay — теперь стало реальностью. Если раньше по технологическим возможностям web просто недотягивал до нативных приложений, то сейчас они практически сравнялись.

Работает и человеческий фактор: больше половины пользователей вообще ничего не скачивают из магазина приложений. Это официальная статистика. Те же самые пользователи охотно посещают сотни сайтов в месяц — это нормальное для них поведение в сети.

В результате стоимость привлечения клиентов через PWA (сайты) до 10 раз ниже, чем через мобильное приложение: пользователю удобнее и искать информацию, и устанавливать приложения в обход магазина.

В числе первых возможностями PWA воспользовались игроки сектора e-Commerce и уже оценили возможности технологии.

9 плюсов PWA

  1. Адаптируется для всех устройств.
    Загрузить PWA можно на десктоп, смартфон, планшет и на терминал в торговом зале. Его работоспособность не зависит от ОС, установленной на устройство: создавать отдельные приложения под Windows, iOS, Android не придётся.
  2. Находится через Google(и любую другую поисковую систему).
  3. Быстро грузится.
    Например, ядро PWA Uber «весит» 50 килобайт. Оно грузится за миллисекунды даже в 2G.
  4. Быстро работает.
    Никаких зависаний и скроллов: PWA реагирует на все действия пользователя мгновенно.
  5. Стабильно работает с нестабильной сетью.
    Разрывы соединения и медленное соединение с Интернетом никак не повлияют на user experience. PWA, в отличие от сайта, будет работать стабильно. Более того, само приложение откроется при полном отсутствии Интернета, хотя для работы ему и требуется информация о товарах и ценах, которую нужно получить через сеть.
  6. Front отделён от back'а.
    А значит, меньше времени и ресурсов тратится на разработку и переработку дизайна и логики взаимодействия PWA с клиентом.
  7. Следствие шестого плюса — PWA устойчив к высоким нагрузкам.
    На user experience не влияет то, что происходит «внутри», пока он выбирает и делает заказ. Он уверен: его заказ попадёт в систему и будет исполнен в срок. Даже в периоды сверхнагрузок — в «чёрную пятницу» или во время новогоднего шопинга. Ведь PWA умеет сохранять данные, если back недоступен или перегружен, и передавать их, когда связь с back'ом восстанавливается или нагрузка на него снижается.
  8. Можно добавить на стартовый экран в обход App Store и Google Play.
  9. Можно загрузить в App Store и Google Play.

Почему PWA становятся так популярны?

PWA удачно попали на стык ожиданий пользователя и маркетолога.

Пользователь видит красивый интерфейс, с которым удобно и приятно взаимодействовать. Страницы быстро грузятся, товары — ищутся, добавлять в избранное или оформлять заказы легко.

Путь от решения до покупки сокращается до трёх шагов: «Окей, Google» – открытие PWA – заказ.

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

Показателен пример PWA AliExpress

После внедрения технологии на 74 % увеличилось среднее время сеанса, средний пользователь стал просматривать в два раза больше страниц. Конверсия новых пользователей в покупателей увеличилась на 104 %!

PWA интернет-магазина La Nature, разработанного kt.team, уже в первые месяцы показал рост конверсии на 65 % с мобильных устройств, пользователи стали просматривать на 30 % больше товаров, а время загрузки страниц сократилось до 0,1 секунды.

Маркетолог видит не только эти результаты, но и внутренние процессы, связанные с внедрением PWA. Он привык слышать «OK, мы переставим эту кнопку, но это неделя разработки». CMS диктует определённую логику, которой вынужден подчиняться дизайн интернет-магазина. Создание PWA освобождает маркетолога от жёстких рамок и позволяет тестировать новые инструменты и логику, не тратя на это космических бюджетов.

Маркетолог привык бороться за место на стартовом экране своего покупателя — и с PWA, в отличие от сайта, он легко займёт это место.

Маркетолог — давайте будем честными — не хочет трижды платить за один и тот же продукт. С PWA его расходы на разработку сократятся в разы.

Почему внедрять PWA нужно именно сейчас?

Технология PWA известна с 2015 года. Но по-настоящему её время настало именно сейчас.

Только с середины 2018 года PWA начали поддерживать операционки iOS младше 11.3 и все последние версии Android. PWA открываются на всех современных браузерах без искажений и проблем. С февраля 2019 года PWA можно добавлять в App Store и Google Play, давая пользователю возможность скачать приложение из привычного источника.

Vue Storefront vs PWA Studio: выбираем технологию

PWA Studio — «штатная» технология для Magento, с которой мы часто работаем. Она идеально совместима с другими функциями этой системы. Но даже Magento-интеграторы не всегда рекомендуют использовать для разработки PWA именно эту технологию.

«Есть два момента, почему мы не советуем своим заказчикам разработку PWA в PWA Studio. По крайней мере, на сегодняшний день.

Первое — в PWA Studio до сих пор не реализована технология SSR (server-side rendering). Он „не умеет" выдавать поисковику готовую страницу по продукту. Vue Storefront для поискового робота выглядит так же, как и обычный сайт — а это важно для SEO...

Второе — у PWA Studio меньше абстракция стека. Он „заточен" под Magento, а вот совмещение с другими платформами e-Commerce проходит уже не столь гладко. Независимый Vue Storefront без проблем интегрируется с любым back'ом и обменивается с ним данными».

Как вы думаете, остались ли ещё у нативных приложений преимущества перед PWA в e-Commerce? Какая технология сможет удержать лидерство в будущем?

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Андрей Путин", "author_type": "self", "tags": [], "comments": 9, "likes": 10, "favorites": 40, "is_advertisement": false, "subsite_label": "marketing", "id": 88252, "is_wide": false, "is_ugc": true, "date": "Wed, 16 Oct 2019 10:32:01 +0300", "is_special": false }
0
{ "id": 88252, "author_id": 369965, "diff_limit": 1000, "urls": {"diff":"\/comments\/88252\/get","add":"\/comments\/88252\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/88252"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199113, "last_count_and_date": null }
9 комментариев
Популярные
По порядку
Написать комментарий...
2

Автор красавчик....

Ответить
2

Пуши на айфоны не получить, вот пожалуй самый жирный минус PWA.

Ответить
1

В чём именно вопрос? APNs тут не подходит, т.к. речь о веб пушах, а сафари для ios их не поддерживает. Наверно потому что в большинстве случаев это спам от сомнительных ресурсов, но, тем не менее, развитие PWA это тормозит.

Ответить
0

Да - вы правы. Анонса не было про пуши. Только поддержка PWA, но push не вошёл)) Странно, конечно! Управлять спамом можно просто ответив "нет" на запрос пуша

Ответить
0

Это очень странно, особенно при том, что macOS поддержка давно есть

Ответить
0

Я потому и спутал - что точно слышал на этапе где то ios 11-12 про прикручивание поддержки PWA. Искренне думал, что она полноценная, с пушами - как везде)) 

Но Эппл опять в своем репертуаре - наверное, охраняет AppStore. 

Ответить
0

вопрос не только и не столько в пушах. Сами пуш-нотификации довольно спорны - ведь, как вы знаете, сейчас вообще каждый сайт считает своим долгом запросить у тебя разрешения на пуши. Безусловно, здесь должны устояться отраслевые стандарты (в каких случаях это норм, в каких - вредно). Apple пошла по пути "на сайте - нет, но если ты опубликовал апп - пушь". APNS (спасибо, коллегам).
Workaround напрашивается сам собой, которые немного увеличивают косты конкретно для пушей. Это некоторые минусы, поддерживаю.

Мой посыл был в том, что на сегодня в JS можно и машинное обучение (и даже обучать на устройствах - tensorflow.js), внедряется Generic Sensor API и так дальше - получается, что сбылась мечта Стива Джобса и вот-вот вообще не нужны будут нейтивы. Я уже не говорю про скорость рендера CSS (60FPS и более) и революциями в CSS которые менее громкие, но происходят на наших глазах. Получается, что PWA при всех минусах на сегодня имеет такое количество плюсов!

Ответить
0

Маркетинговый буллшит какой то

Ответить

Комментарий удален

{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }