PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта

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

Хочу обозначить, что цель этой статьи – рассказать как можно большему количеству людей о том, что есть такая технология. Она называется PWA.

Записал видео, для тех кто не хочет читать много текста

Что такое PWA

PWA или Progressive Web Application – технология, которая позволяет клиентам установить ваш сайт на смартфон как приложение. На русский язык переводиться как «прогрессивное веб-приложение».

Теперь не нужно разрабатывать отдельно сайт, приложение под iOS и приложение под Android. Достаточно иметь и поддерживать только сайт.

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

Бренды Twitter, Tinder, Uber, Telegram, Starbucks, Forbes, AliExpress, Aviasales используют приложения на базе PWA как основе или в дополнение к мобильному приложению.

Преимущества приложения на базе PWA

  1. Позволяет отправлять Push-уведомления.
  2. Разработка и поддержка на 70% дешевле, чем у мобильных приложений.
  3. Экономия на повторном привлечении клиента, так как нет расходов на инструменты возвращения клиента (ретаргетинг, ремаркетинг).
  4. Не нужно размещать приложение в AppStore и Google Play. Его можно скачать напрямую с вашего сайта.
  5. Работает быстрее чем сайт.
  6. Работает без интернета.
  7. Размер PWA приложения, как правило, не превышает 1 мб. Это меньше, чем мобильное приложение.
  8. PWA приложение работает с функциями: геолокация, камера, микрофон.

Недостатки PWA приложения:

  1. На момент написания статьи у PWA приложение нет возможности отправлять уведомления на iPhone, так как в iOS браузер по умолчанию Safari. Однако в iOS 14 Apple добавила функцию выбора браузера по умолчанию. Это означает, что если пользователь выберет стандартным браузером не Safari, то уведомления можно будет отправлять и на iPhone.
  2. Также PWA приложения не поддерживают функцию Touch ID и ограниченно работают с функцией Bluetooth.

Какие задачи можно решать при помощи приложения на базе PWA

  • Стимулировать повторные продажи.
  • Упрощать поиск компании. Доступ к компании в 1 нажатие на экране.
  • Повышать узнаваемость бренда. Иконка (логотип) компании всегда на виду у пользователя
  • Повышать средний чек сделки, допродавая продукты при помощи Push-уведомлений.
  • Оставаться на связи с клиентом. Отаравляйте клиенту уведомления о том, что товар прибыл в пункт самовывоза. Или что товар будет доставлен сегодня.
  • Экономить на рекламе. Теперь не нужно настраивать догоняющую рекламу с новой акцией. Достаточно отправить уведомления, которое точно заметят ваши клиенты.
  • Избавиться от конкуренции в поисковой выдачи. Ваши клиенты обращаются через приложение, в котором нет конкурентов, в отличии от поисковой выдачи.

Каким бизнесам подходят PWA приложения

Подходит всем бизнесам, услугами которого клиенты пользуются регулярно.

Ниже описал подробнее как можно использовать приложение на базе PWA

1. Клининги

  • Клиенты смогут в 1 клик повторно заказывать услугу.
  • Вы сможете анализировать частоту заказов каждым клиентом и отправлять напоминания об уборке заранее, увеличивая частоту покупок

2. Рестораны, кафе, пиццерии и сети доставок

  • Клиенты смогут в 1 клик заказывать продукцию или бронировать столик.
  • Вы сможете стимулировать клиентов заказывать больше путем отправки промокодов со скидками и акциями.
  • Вы сможете использовать карты лояльности при помощи приложения и QR-кодов.

3. Интернет-магазины

  • Клиенты смогут найти вас в 1 клик и выбрать необходимый товар без отвлечений. И если они положили товар в корзину, но при этом не оформили заказ, вы можете простимулировать их к покупке. Делается это при помощи уведомлений со скидкой или подарком.
  • Клиенты смогут выбирать товар без интернета. А когда он появиться, данные автоматически подгружаются к вам.
  • Уведомляйте клиента об акциях или изменениях статуса заказа.

4. Онлайн курсы

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

5. Онлайн СМИ

  • Ваши пользователи смогут найти вас в 1 клик, что повысит частоту посещений вашего ресурса.
  • Пользователи не будут отвлекаться на другие сайты, что повысит вовлеченность.
  • Пользователи смогут получать уведомления о новых публикациях на интересующие их темы.
  • Вы сможете получать дополнительную прибыль, рассылая рекламные объявления, при помощи Push-уведомлений.

6. Барбершопам и бьюти сфера.

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

7. Сетевые компании

  • Вы сможете уведомлять клиентов о поступлении новых продуктов, или о статусе доставке.
  • Пользователи смогут найти вас в 1 клик, что повысит частоту посещений вашего ресурса.
  • Клиенты смогут выбрать необходимый товар без отвлечений. И если они положили товар в корзину, но при этом не оформили заказ вы можете напомнить об этом и простимулировать к покупке при помощи уведомлений со скидкой или подарком.
  • Клиенты смогут выбирать товар без интернета. А когда он появиться, данные автоматически подгружаются к вам.

8. Автосервисы

  • Напоминайте клиентам о замене масла или других периодических работах по обслуживанию авто.
  • Уведомляете клиента о статусе ремонта.
  • Благодарите постоянных клиентов подарками.
  • Делайте допродажи товаров по уходу за автомобилем при помощи push-уведомлений

9. Сервисы по шерингу техники

  • Пользователи смогут найти вас в 1 клик, что поможет им оперативно решать возникшие проблемы.
  • Отправляйте уведомления о состоянии техники (Автомобиль забронирован) или о новых акциях и скидках.
  • Благодарите постоянных клиентов подарками.

Как происходит процесс установки

Вы можете сами пройти процесс установки, открыв в браузере на мобильном устройстве страницу.

1. Пользователь переходит на сайт и видит всплывающее окно с предложением. Например: «Пицца со скидкой 25% при заказе с приложения».

PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта

2. Пользователь в один клик устанавливает приложение.

PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта

3. Пользователь переходит в приложение, внутри этого приложения открывается сайт и пользователь делает заказ со скидкой.

PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта

4. Приложение установлено. Следующий шаг, это отправка пуш уведомлений пользователю.

PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта

Сравнение PWA с сайтом и мобильным приложением

PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта

О чем еще стоит упомянуть

  • PWA можно загрузить и продвигать в Google Play.
  • PWA можно создать для части сайта.
  • Приложение обновляется при помощи кэша, то есть каждый раз, когда пользователь заходит в приложении с включенным интернетом.
  • Отслеживать установку приложений можно при помощи сервиса "Яндекс. Метрика".

Подробнее про разработку PWA приложения можете узнать на специальной странице.

На этом пока все. Вкратце описал, что такое приложении на базе PWA технологии и как его можно использовать именно с позиции маркетолога.

Далее планирую сделать еще 2 статьи и поделиться результатами внедрения такого приложения, а также рассказать подробнее как составить и отправить Push-уведомление в приложении на базе PWA.

Если остались вопросы, задавайте их в комментарии. Идеи по использованию или опыт использования таких приложений также пишите в комментарии. Интересно узнать.

Спасибо за уделенное время!

1313
19 комментариев

Давно существуют бесплатные ресурсы для изготовления таких пва. Не хватает ссылок на них и небольшого обзора.

6

Чтобы сделать универсальное PWA, которое нативно (!) работает на Android и iOS и при этом достаточно хорошо работает в браузере, можно использовать «React Native for Web» – https://github.com/necolas/react-native-web

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

"Чистые PWA" на мобильных пока ещё работают кривенько в качестве приложений, потому что не имеют доступа ко многим родным функциям аппаратов.

3

Задам глупый вопрос: чем React Native for Web принципиально отличается от Flutter? Начал ковырять последний, по сути, тоже полунативное приложение получается на выходе

В целом у pwa на react есть как достоинство так и недостатки.
По своему опыту скажу, что на старых и дохлых Андроидах это тупит и подвисает.

Прежде, чем андроид сообразит, что PWA можно установить, проходят десять секунд и более. Отрисовка тоже оставляет желать лучшего.

Идеальный сценарий для таких аппаратов серверный пререндинг SSR. 

С другой стороны, тренд на обновление телефонов только ускоряется.

По моему мнению более 60% трафика получат хороший результат.

Но если это реклама? Это означает что вы теряете 40% ? 

Может быть рано запускать рекламу на PWA?
Я тестирую на бесплатном react PWA CREATOR : https://dash.sweety.link

Закон о хранении данных в китае