Пишем полезное о маркетинге, продукте и онлайн-коммуникациях

Полезные материалы о маркетинге, технологиях и платформе

Наши эксперты расскажут, как максимально эффективно использовать Altcraft Platform для достижения ваших целей.

Выведите свой бизнес 
на новый уровень

Продолжая использовать наш сайт, вы даете согласие на обработку файлов cookie, которые обеспечивают правильную работу сайта.

Скачать документацию

Политика антиспам

Блог

Связаться с Altcraft

Поддержка

Партнерам

Цены

Политика конфиденциальности

Почему Altcraft

Страница не найдена

Антиспам политика Altcraft Platform

Центр поддержки Altcraft Platform: инструкции и советы

Политика персональных данных

Политика конфиденциальности и обработки персональных данных на сайте

Оставьте заявку и автоматизируйте маркетинг c Altcraft

Демонстрация CDP платформы Altcraft займет 45 минут

Почему бизнес выбирает Altcraft

обработку персональных данных

Вы можете задать нам свои вопросы. Наши эксперты готовы ответить на них в течение рабочего дня.

Что бы вы ещё
хотели узнать?

Как создать шаблон сообщения

Что такое пиксель

Сегментация аудитории для рассылки

Как настроить домен

Может быть интересно

<Img 
img="/uploads/pwa_prilozheniya_66ae963bcb.png"
alt="PWA приложения" 
/> 

Мобильные приложения — популярный способ вести основные маркетинговые коммуникации с клиентами, но их разработка достаточно дорогая и часто долгая. Поэтому появилась альтернатива в виде технологии PWA, которую Microsoft начала разрабатывать в 2000 году. Progressive Web App отображает данные сайта компании в привычном интерфейсе мобильного приложения, так что пользователи не увидят разницы.

Снова о технологии заговорили в 2015-м, когда корпорация Google стала поддерживать нужные для создания PWA компоненты. Есть мнения, что в будущем веб-приложения заменят классические. Уже сегодня гибридный формат сайта и привычного app используют, чтобы ускорить разработку и снизить её стоимость. 

Узнайте подробнее о PWA, плюсах и минусах таких приложений, а также об особенностях их создания.

## Что такое PWA приложения

Progressive Web App (PWA)  — это адаптация сайта компании под мобильное устройство в виде приложения. Визуально это тот же значок и привычный интерфейс, но принцип работы другой. 

PWA приложения повторяют функционал мобильного приложения. Веб-страницы размещаются на домене, а на устройствах открываются через браузеры. Можно назвать прогрессивные веб-приложения продвинутыми версиями сайта, которые адаптируются под устройство пользователя. При этом специальная разработка под Android и IOS не нужна. 

Веб-приложения при необходимости работают автономно, присылают [**Push уведомления**](https://altcraft.com/ru/blog/mobilnye-i-brauzernye-push-uvedomleniya) клиентам, что важно для постоянной коммуникации бренда с аудиторией. Устанавливаются обычно через сайт компании, но появились уже и каталоги с Progressive Web Apps: [**appsco.pe**](https://appsco.pe/), [**storepwa.ru**](https://storepwa.ru/), [**findpwa.com**](https://www.findpwa.com/) и другие. 

<Img 
img="/uploads/1_26e93f7515.png"
alt="Web приложения"
src="Каталоги с PWA приложениями"
/> 

Web приложения ускоряют взаимодействие с пользователями, создают конкурентные преимущества для бренда, продвигают его товары и услуги через PWA Push notifications. Поэтому технологию используют разные бизнесы, особенно те, где клиенты делают покупки и заказывают услуги регулярно: магазины, салоны красоты, клининг, автосалоны, рестораны, доставка еды, СМИ и так далее. Технология PWA «спасает» компании во время массовых блокировок российских приложений в официальных магазинах. 

## Плюсы и минусы PWA приложений

### Плюсы

- **Прогрессивное веб приложение для пользователя почти не отличается от мобильного**, при этом его разработка дешевле в разы.
- **Сделать PWA версию сайта намного быстрее**. Существуют даже конструкторы для создания. Например, [**Microsoft заявляет**](https://learn.microsoft.com/ru-ru/windows/apps/publish/publish-your-app/turn-your-website-pwa), что прогрессивную версию сайта через инструмент PWABuilder получится собрать в перерыве на обед. 
- **Возможность установки с сайта, а не из специального каталога**. Так PWA приложение не нужно подгонять под требования стора, ждать одобрения и бояться риска удаления.
- [**Повышение лояльности**](customer-loyalty) **и вовлечённости пользователей в контент бренда, которые приводят к повышению продаж и среднего чека**. Напоминание клиентам об акциях и новостях бренда происходит через PWA notifications — привычные Push уведомления, которые сообщают об акциях бренда без запуска рекламы.
- **Индексация приложения поисковыми системами**. Так как PWA — это как бы продвинутая версия сайта, для неё работают правила SEO-оптимизации. Эта особенность даёт дополнительный трафик.
- **Автоматические обновления и меньший вес (не более 3 мегабайт), чем у  мобильного приложения**. Пользователю не придётся занимать лишнюю память устройства. 
- **Быстрая скорость работы по сравнению с сайтом** и возможность перейти в  оффлайн-режим (но с ограничениями).

### Минусы

- **У PWA приложений не полный доступ к аппаратным возможностям устройств**, на которые они устанавливаются, нет возможности использовать все технологии. Например, для IOS не получится воспользоваться Face ID и Bluetooth. Apple очень медленно адаптируется под веб-приложения, поэтому на их устройствах есть проблема с отправкой Push.
- **Зависимость от браузера**. Возможны ограничения из-за использования устаревших версий операционных систем, где нельзя установить обновления. Также сами браузеры не всегда обеспечивают полный функционал веб-приложений.
- **Большой расход батареи**. PWA кодят на JavaScript — языке программирования, который тратит много ресурсов системы, в отличие от нативных языков (Java, Swift и других).
- **Меньшая виральность**. Пользователи привыкли скачивать приложения из App Store (IOS) и Google Play (Android), а не искать их на сайте брендов. При создании только PWA версии придётся вложиться в проведение маркетинговой кампании по продвижению. Или всё же пройти через модерацию каталогов приложений, которая не всегда простая и быстрая.  

## Успешные кейсы работы компаний с PWA приложениями

PWA примеры есть у известных брендов: Telegram, Youtube, TikTok, Aviasales, Tinder, Pinterest, Forbes, AliExpress, Uber и других. Некоторые из них значительно улучшили пользовательский опыт и увеличили доход.

**Tinder** запустили веб-версию приложения, которая занимает всего 2,8 мегабайт памяти по сравнению с приложением на android (30 мегабайт). Скорость загрузки удалось уменьшить с 11,91 до 4,69 секунд, что улучшило user experience. 

**Pinterest** также смог [**сократить время загрузки**](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154) интерфейса с 23 до 5,6 секунд. На 40% увеличилось время, которое пользователи проводят в сервисе, а доход от рекламы — на 44%. Значительно (60%) повысилось вовлечение в контент. 

<Img 
img="/uploads/2_ce810e8a3a.png"
alt="Пример от Pinterest"
src="PWA приложение от Pinterest"
/> 

Улучшить пользовательский опыт с PWA получилось у **Forbes**, приложение которого часто называли громоздким. Теперь люди проводят на [**40%**](https://digiday.com/media/new-mobile-site-forbes-boosted-impressions-per-session-10-percent/) больше времени за чтением статей издания и просматривают на 15% больше контента. Загружаться страницы также стали быстрее. Если раньше ожидание длилось в среднем 6,5 секунд, то в новой версии — всего 2,5. 

Прогрессивное веб-приложение увеличило коэффициент конверсии **AliExpress** на [**104%**](https://web.dev/aliexpress/). За один сеанс пользователи стали посещать в два раза больше страниц и тратить на это 74% времени. 

Компания **Uber** использует [**PWA технологию**](https://www.uber.com/en-UA/blog/m-uber/), чтобы снизить скорость загрузки приложения на всех устройствах даже при 2G соединении. Это важно для выхода на новые рынки. В итоге сервис открывается за 3 секунды и занимать всего 50 килобайт. 

<Img 
img="/uploads/3_f40c992471.png"
alt="Пример от Uber"
src="PWA приложение от Uber"
/> 

## Что нужно для создания PWA приложения

Progressive Web Apps доступны во всех операционных системах, но изначально нужен сайт, который преобразуется в прогрессивную версию с технологиями JavaScript, HTML и CSS. Веб-приложение отображается через WebView — компонент системы, который открывает интернет-страницы в приложении. Для работы PWA нужны браузеры: Safari (IOS) и Chrome (Android).

Чтобы создать веб-приложение, потребуются Web App Manifest и Service Worker.

**Service Worker** — скрипт, который принимает информацию (запросы) от браузера через безопасное HTTPS соединение. Компонент открывает браузер фоново, даже если страница не активна. Благодаря Service Worker пользователю отправляют Push уведомления, а приложение без участия юзера синхронизируется с сайтом. Обновления происходят автоматически, также доступен офлайн-режим. 

**Web App Manifest** — манифест в виде файла manifest.json добавляется в код страницы сайта и передаёт информацию браузеру о том, как должно отображаться приложение на устройстве. Определяет имя, ярлык, заставку, тему приложения и другие элементы. Манифест сообщает, какие данные остаются неизменными, а какие обновляются.   

Другие важные элементы для разработки веб-приложения:

- **Цифровой SSL-сертификат** подтверждает подлинность сайта. Нужен для шифрованного соединения HTTPS соединения, которое обеспечивает безопасность. 
- **Application Shell** — оболочка приложения или шаблон, в который загружаются данные с веб-страниц сайта.

## Резюме

PWA приложение почти полностью копирует интерфейс и функции [**мобильного приложения**](mobilnoe-prilozhenie-kak-marketingovyj-kanal), но работает технология по-другому. Progressive Web App запускается на экране через ярлык с помощью браузера. Хотя пользователь видит только приложение, которое обновляется, хранит данные и отправляет пуш сообщения. В разработке PWA проще и быстрее, но есть ограничения по некоторым функциям. 

Веб-приложение создаётся с компонентами Service Worker и Web App Manifest, также придётся получить SSL-сертификат, чтобы сделать соединение безопасным и использовать Application Shell. 

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

<Note>
У нас появился [**Telegram-канал**](https://t.me/kraftovyj_marketing). Там вы найдёте самые интересные тренды и новости в сфере маркетинга и технологий. Будьте в теме вместе с нами :)
</Note>


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

medium_pwa-prilozheniya.png

small_pwa-prilozheniya.png

thumbnail_pwa-prilozheniya.png

pwa-prilozheniya.png

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

PWA приложения: что это такое, плюсы и минусы, особенности

Что такое PWA приложения: примеры успешного использования

small_kejs-alfastrahovanie-v-menyu.png

thumbnail_kejs-alfastrahovanie-v-menyu.png

kejs-alfastrahovanie-v-menyu.png

Обновили >1500 шаблонов, OR транзакционных сообщений ≈100%

small_kejs-uzum-v-menyu.png

thumbnail_kejs-uzum-v-menyu.png

kejs-uzum-v-menyu.png

Снизили показатель отказов от push, увеличили OR, сэкономили рабочие часы

CDP платформа клиентских данных

Вся информация о пользователе собрана в единой платформе клиентских данных

Омниканальный маркетинг

Рассылки в различные каналы коммуникации: email, sms, push, мессенджеры

Промокоды, бонусы и баллы для выстраивания долгосрочных отношений с клиентами

Создание и редактирование любого HTML шаблона, сохранение собственных блоков

Персональные рассылки

Персонализированная рассылка сообщений для клиентов через коммуникационные каналы

Проведение экспериментов и оптимизация маркетинговых стратегий

Аналитика в реальном времени

Отслеживание эффективности маркетинговых кампаний для принятия верных решений

Подключение внешних систем к платформе и синхронизация данных с базами компании

Создание анкет, опросов, форм для обратной связи любой сложности

Сообщения в мессенджеры

Возможность общения с клиентами в любое время и в любом месте

CDP платформа клиентских данных

Омниканальный маркетинг

Программы лояльности

Конструктор HTML писем

Персональные рассылки

A/B/n-тестирование

Аналитика в реальном времени

Интеграции и WebHooks

Формы и Опросы

Сообщения в мессенджеры

Пишем полезное о маркетинге, продукте и онлайн-коммуникациях

Не забудьте подписаться на рассылку блога