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

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

По сравнению с веб-приложением PWA:

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

Кроме того, начать пользоваться PWA-приложением довольно просто — смотрите, как установить сайт как приложение в пошаговой инструкции.

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

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

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

Главное, чтобы пользователь не случайно попал на сайт, а действительно заинтересовался.

Когда пользователь уже сделал заказ через приложение PWA, по сути он у вас в кармане. Дальше в ход пускаем уведомления, с помощью которых можно:

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

С учетом банальной лени и сложности выбора товаров и услуг, в будущем клиент обратится в компанию в 1-2 клика скорее, чем надумает искать что-то новое.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Проверьте, насколько ресурс «готов» для технологии PWA
​
Для этого установите и включите Lighthouse — расширение для Google Chrome. Откройте страницу, далее — клик по кнопке «Generate Report» в панели Lighthouse.
​
Вы увидите, на сколько процентов страница, на которой вы находитесь, годится по функционалу и внешнему виду для PWA. Это метрика Progressive Web App — именно на неё обращаем внимание.

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.