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% при заказе с приложения».

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

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

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

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

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

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

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

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

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

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

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

0
17 комментариев
Написать комментарий...
Anna Petrova

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

Ответить
Развернуть ветку
Pavel Ivanov

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

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

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

Ответить
Развернуть ветку
Groosha

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

Ответить
Развернуть ветку
Pavel Ivanov

Вопрос не глупый (-:

Смысл у разработок одинаковый: обеспечить кроссплатформенность приложений.

Разница в вендорах:
- Flutter делает Google
- React Native for Web делает комьюнити Фейсбука

Не сам Фейсбук, но комьюнити, которое выстроено вокруг React Native и React. В свою очередь, React и React Native обслуживаются инженерами фейсбука.

Я предпочитаю наработки Facebook, потому что они прогрессивнее. Гугл иногда очень странным образом «застревает» в своих наработках и/или перестаёт их двигать вперёд или заводит их куда-то не туда. Так было с Material Design, так было с первыми версиями ангуляра и многими другими штуками. А уж сколько они продуктовых наработок похоронили – я вообще молчу...

Ответить
Развернуть ветку
Denis Kiselev

Разница не только в вендорах, есть существенная техническая разница.

Для начала - в принципиальном подходе: flutter эмулирует интерфейс платформы, а react native  позволяет задействовать нативные элементы интерфейса.

Есть разница и во взаимодействии с платформой: react native - это стандартный js с виртуальной машиной, которая так или иначе взаимодействует с нативной платформой, раньше - через пресловутый js bridge, сейчас делают существенно более быстрый JNI, который позволит более прямо взаимодействовать с объектами платформы. У Flutter - это гугловский  язык Dart  с компиляцией в нативный код, который напрямую взаимодействует с платформой.

Ответить
Развернуть ветку
Pavel Ivanov

Насколько я понял, его пока не интересуют такие детали внутренних взаимодействий. В деталях отличий там очень много :-)

Ответить
Развернуть ветку
Groosha

Спасибо за ответ!
Субъективно, что на Ваш взгляд проще для "не веб-программистов"? Давно хочу сделать визуализацию данных со своего API делать не в Telegram, а в веб и/или в приложение для Android.

Ответить
Развернуть ветку
Pavel Ivanov

Думаю, что Flutter попроще будет. Дело в том, что "React Native for Web" – это оболочка над React Native, который в свою очередь использует компоненты и принципы React.

То есть для его использования желательно изучить:
1. React
2. React Native
3. React Native for Web
4. При этом для стилизации UI тоже нужно будет подключать какой-то отдельный компонент.

В свою очередь Flutter более целостный и упакованный – в нём достаточно хорошо интегрированы готовые виджеты, компоненты и всё это основано на языке программирования Dart :) То есть Flutter, как мне кажется, проще учить с нуля, не проходя поэтапное изучение различных технологий.

При этом, в обоих случаях, конечно, должны быть базовые знания HTML/CSS/JS и понимание архитектуры мобильных платформ.

Ответить
Развернуть ветку
Groosha

Благодарю! Тогда продолжу изучать Flutter

Ответить
Развернуть ветку
Pavel Ivanov

Вот здесь достаточно объективное сравнение Flutter и React Native: https://dou.ua/lenta/articles/flutter-for-mobile-apps/

Этой статье уже год, но она очень адекватна.

Ответить
Развернуть ветку
Ленин-гриб

Павел, ты просто БРО, просто красавчик, ответил на все вопросы, которые я хотел задать :)

Ответить
Развернуть ветку
Pavel Ivanov

:-] пожалуйста 

Ответить
Развернуть ветку
Anna Petrova

Пример.
https://appsgeyser.com/

Ответить
Развернуть ветку
Марк Гринь

Очень круто!

Ответить
Развернуть ветку
Roman Bolshiyanov

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

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

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

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

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

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

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

Ответить
Развернуть ветку
Сергей Устюжанин

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

Ответить
Развернуть ветку
Павел Кузнецов

Благодарю за статью! Подскажите, а как конкретно можно "Отслеживать установку приложений можно при помощи сервиса "Яндекс. Метрика"?

Ответить
Развернуть ветку
14 комментариев
Раскрывать всегда