Шаблоны
Сайты клиентов
Тарифы
Обучение
Campus - Обучение
Практические знания, как улучшить навыки в создании сайтов
и заработке на этом
Статьи
Статьи, как улучшить качество сайта
и увеличить продажи
Справочный центр
Инструкции по сервису и связь
с тех.поддержкой
Вход
Регистрация
← Назад
PWA
Сайт

PWA-приложения: зачем они нужны и как их сделать из сайта

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

Без адаптации под устройства не обойтись — иначе пользователь не задержится на сайте дольше 3-5 секунд. Можно создать версию в мобайле, а можно — PWA-приложения: что это за технология, для чего она пригодится и как её применять — смотрите в нашей статье.
10.01.2022 · 15 минут

Аудит вашего сайта или консультация по редактору

Аудит вашего сайта или консультация по редактору

0₽

0₽

подключенного тарифа для конструктор сайтов

подключенного тарифа для конструктор сайтов

+4

+4

месяца

месяца

промокод на продвижение в сетях Яндекс

промокод на продвижение в сетях Яндекс

+12.000₽

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

тарифа чат-ботов, автоворонок и мобильных приложений

+3

+3

Бесплатный домен в зоне .ru/.рф

0₽

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

0₽

месяца

месяца

/год

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

Получите подарки от mottor при подключении тарифа

спецпредложение

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

Это технология, с помощью которой можно превратить визуал и функционал сайта в приложение. PWA расшифровывается как Progressive Web Application. По контенту и по функциям это то же самое, что и веб-ресурс, но в виде приложения.

Приложение — более удобный способ взаимодействия с контентом для пользователей в мобайле, а PWA к тому же доступно в автономном режиме и всегда находится на видном месте — на главном экране телефона.
По сравнению с веб-приложением PWA:
• Быстрее загружается

• Весит до 2 мб и не занимает много места на телефоне

• Может работать как онлайн, так и оффлайн

• Содержит минимум элементов, необходимых потенциальному клиенту для поиска информации и выполнения целевого действия
Допустим, потенциальный клиент идет из поисковой выдачи, чтобы выбрать товар и оформить заказ. Сайт сбивает с толку большим количеством виджетов — в итоге пользователь забывает, зачем сюда пришел и уходит ни с чем. Но если вы предлагаете альтернативный вариант — приложение, есть вероятность, что человек его попробует. Также человека можно дополнительно мотивировать установить приложение на смартфон с помощью скидки, увеличенного кэшбэка, бонусов и т.д.
Ссылка на скачивание приложения
Кроме того, начать пользоваться PWA-приложением довольно просто — смотрите, как установить сайт как приложение в пошаговой инструкции.

Как привлекать клиентов с помощью приложения

Даже с учетом, что веб-ресурс в порядке с технической стороны, часто с ним неудобно взаимодействовать со смартфона — а это довольно распространенный способ выхода в Интернет, в том числе для онлайн-покупок. Решение этой проблемы — приложение, которое пользователь в один клик скачивает на телефон и с которого продолжает взаимодействовать с компанией, если это актуально.

Ключевое слово — «актуально». За приложением PWA не нужно идти в Google Play или AppStore — это лишний шаг в воронке продаж, который требует дополнительных действий и отдаляет от конечного результата в виде заявки или заказа. Некоторые специально разрабатывают мобильные приложения, но пользователь может и не знать, что оно у вас есть. При первом касании с потенциальным клиентом важно, что он своевременно узнает о приложении, скачает его и начнет пользоваться.

С оповещениями всё аналогично сайту — если пользователь оставил электронную почту или номер телефона, вы сможете отправлять ему туда уведомления. Push-уведомлений в PWA приложениях нет, так как это адаптив сайта, а не полноценное мобильное приложение.
Добавить сайт на главный экран
Главное, чтобы пользователь не случайно попал на сайт, а действительно заинтересовался.

Как удерживать клиентов с помощью приложения

Когда пользователь уже сделал заказ через приложение PWA, по сути он у вас в кармане. Дальше в ход пускаем уведомления, с помощью которых можно:
  • Мотивировать на повторные покупки, чтобы в итоге повысить частоту покупок на каждого клиента. Для этого отправляйте промокоды на скидки, предлагайте подарки и участие в акциях — в общем, развивайте систему лояльности и увеличивайте клиентскую базу.
  • Делать допродажи сопутствующих товаров. Например, тем, кто купил смартфон, можно предложить купить к нему защитное стекло.
Важный момент: запоминающийся значок приложения в уведомлении — способ повысить узнаваемость бренда. Поэтому даже если пользователь не оформит заказ сразу, по лого в уведомлении он может узнать компанию в соцсетях, наружной рекламе — в каких угодно маркетинговых каналах.
Значок сайта
С учетом банальной лени и сложности выбора товаров и услуг, в будущем клиент обратится в компанию в 1-2 клика скорее, чем надумает искать что-то новое.

В чем PWA удобнее сайтов и мобильных приложений

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

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

Со стороны клиента PWA удобнее в техническом плане — со смартфона проще открыть приложение, чем веб. Дело за малым — сообщить о том, что просматривать контент и делать заказы можно в приложении, и разместить ссылку на скачивание на видном месте сайта.
Если сравнивать PWA с мобильным приложением, преимущества следующие:

• Его «видят» и индексируют роботы Яндекса и Google

• Обновляется само при каждом выходе клиента в онлайн, так как повторяет контент сайта, а в случае с нативным приложением — вносить изменения нужно будет и в сайт, и в приложение

• Дешевле по разработке и техническому сопровождению

• Меньше весит
Для продвижения каких продуктов подходят PWA-приложения покажем дальше на примерах.

Для каких сфер бизнеса пригодятся PWA-приложения

Во-первых, если какими-то услугами и товарами человек пользуется постоянно — PWA приложения облегчат ему жизнь. Например, доставка еды, покупка контактных линз, посещение автосервиса, бронирование мест на событие или услугу.

Пропадает необходимость заново искать любимого доставщика в поиске, можно в пару кликов скачать приложение, и оно будет всегда под рукой вместе с мессенджерами и соцсетями, с уведомлениями о скидках, акциях, подарках и прочих мероприятиях. Поставщикам есть над чем поработать, чтобы повышать частоту покупок для каждого клиента.
Цена привлечения клиента в ресторан-доставку с каждым годом только растет, а агрегаторы типа Яндекс.Еды и Деливери берут до 30% комиссии и не отдают базу.

Также для интернет-магазинов есть агрегаторы вроде Озона и Вайлдбериз, но там нельзя нарастить базу.Это временный канал, с которого агрегатор может выгнать, поэтому важно иметь и PWA-приложение с программой лояльности в личном кабинете.

PWA-приложения — самый эффективный способ удерживать клиентов и наращивать LTV, чтобы окупать рекламу и увеличивать базу.Так поставщики могут работать на себя, а не на агрегаторов. Особенно это хорошо работает вместе с программой лояльности.
Илья Суворов, Коммерческий директор Mottor
Илья Суворов,
Коммерческий директор Mottor
Сюда же можно отнести и инфопродукты — например, курсы по обучению. Сейчас онлайн-обучение переходит с привычных ноутбуков и компьютеров в мобильные устройства: уроки делают короче, задания и квизы — удобнее для экранов смартфона. Так даже самый занятой человек может выделить 15-20 минут в день, взять в руки телефон, пройти нужный урок и закрепить знания. В случае с PWA — это будет сильно удобнее, чем на сайте.

Во-вторых, приложения PWA — альтернатива десктопному интернет-магазину. Не всегда у клиента есть возможность зайти с компьютера для онлайн-шоппинга, а в приложении выбрать товар и положить в корзину можно в один клик и без подключения к сети. Когда клиент включит передачу данных или WiFi — данные приложения обновятся, и поставщик получит уведомление о новом заказе.

Что для e-commerce особенно удобно — возможность отправить клиенту уведомления о каждом шаге при доставке товара и о других событиях, связанных с онлайн-шоппингом. Например, что на товар в избранном действует скидка, или что товар, которого не было в наличии снова доступен для заказа.
Одни только брошенные корзины — это огромная часть будущей клиентской базы.
В целом, приложения будут полезны практически для любого бизнеса — как крупного, так и малого, так как они дают возможности сообщать потенциальным клиентам информацию и знать, что она до них точно дойдет. Большинство зарубежных соцсетей и информационных ресурсов также используют приложения PWA и таким способом регулярно пополняют базу пользователей. Среди них — AliExpress и Starbucks.

Как сделать PWA-приложение из сайта

Заказать у профессионалов

Например, у команды mottor можно заказать создание сайта или приложения для доставки под ключ всего за 5 дней, а если ваши данные уже размещены на другой платформе — их можно перенести.

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

Подробности читайте на сайте.

Сделать самому

База для этого: основные навыки работы с HTML и готовый сайт, дружественный для пользователя.

Алгоритм следующий:

1. Проверьте, насколько ресурс «готов» для технологии PWA

Для этого установите и включите Lighthouse — расширение для Google Chrome. Откройте страницу, далее — клик по кнопке «Generate Report» в панели Lighthouse.

Вы увидите, на сколько процентов страница, на которой вы находитесь, годится по функционалу и внешнему виду для PWA. Это метрика Progressive Web App — именно на неё обращаем внимание.
Проверка сайта в Lighthouse
2. Создайте логотип для приложения и прикрепите к сайту

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

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

Чтобы связать значок с сайтом, добавьте иконки разных размеров в папку ресурса, а код, который сформировал генератор — в index.html.

Полный код вы можете посмотреть на Github.com.

Далее — основные элементы кода с пояснением, для чего каждый нужен.
3. Пропишите данные в манифесте приложения

Это файл формата JSON, который можно создать с помощью любого генератора манифестов, например, MageUI.exe, Web App Manifest Generator.

Заполните настройки, которые будут включаться при показе в мобайле — это имя, цвета, иконки. Если что-то непонятно — лучше оставить по умолчанию или обратиться к программисту.

Вот пример, как выглядит создание манифеста в генераторе по данным пользователя:
Создание манифеста приложения
Код JSON из правой части скопируйте и вставьте вместо manifest.json. Убедитесь, что ничего не «сломалось».
4. Добавьте service worker

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

Добавьте код файла в index.html, затем — в корневую папку.

5. Разместите приложение на GitHub Pages и получите URL-адрес

6. Сделайте контрольную проверку качества с помощью Lighthouse. В идеале показатель Progressive Web App должен быть 100%.

Заключение

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

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

Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat

Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно
шаблон сайта доставки еды
шаблон интернет-магазина
шаблон интернет-магазина
шаблон-квиз строительство
шаблон сайта по ремонтуо
450+ шаблонов
ждут вас

Типичные ошибки сайта на конструкторе

Как оценить ключевые показатели интернет-магазина

Конкурентный анализ

Бесплатный конструктор сайта
Все шаблоны
Шаблон онлайн курс
Шаблон курс инвестиций
Шаблон доставка еды
Шаблон онлайн школа
Шаблон для портфолио
Шаблон лендинг вебинара
Шаблон интернет-магазин мебели
Одностраничный сайт
Многостраничный сайт
Создать сайт онлайн бесплатно самому
Создать квиз
Создать сайт бесплатно конструктор
Создать бесплатно интернет магазин
Создать сайт конструктор
Конструктор сайта онлайн
Онлайн конструктор сайта бесплатно
Конструктор интернет магазинов
Конструктор страниц
Сайт конструктор бесплатно
Конструктор создания сайтов
бесплатный конструктор сайтов, лендингов и квизов
Документы:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России
Шаблоны:
Популярные запросы:
О компании и сервисе
Тур по сервису
Блог
Инструкции
Договор-оферта
Партнёрская программа
Шаблоны
Видеоинструкции
Согласие
Тарифы и услуги
Обновления
Политика конфиденциальности
Сделано на mottor
Техподдержка
Платная поддержка
Инструкция по установке