← Назад
PWA
Сайт

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

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

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

Что такое 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

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

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

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

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