PWA-приложение. Для чего бизнесу создавать приложение из сайта?

Оглавление

Что такое PWA

PWA (Progressive Web Application) – это веб-приложение нового поколения, которое создается с помощью стандартных веб-технологий (HTML, CSS и JavaScript), сочетает функции браузеров и нативных мобильных приложений. Идея создания гибридного продукта зародилась в 2000 году, но широкое распространение технология PWA получила через 15 лет, благодаря новым возможностям Google Chrome, передает tproger.ru. Стимулом для создания PWA стал растущий спрос компаний на увеличение и удержание мобильного трафика.

Удобство прогрессивных веб-приложений оценили ведущие мировые компании – на базе PWA функционируют Telegram, Twitter, Forbes, Alibaba, Starbucks, Pinterest, Instagram, Uber и др.

Структура PWA

Веб-приложение PWA – это, по сути, сайт с расширенными возможностями, который функционирует и визуально выглядит как автономное мобильное приложение. Его отличает высокая скорость работы, не нужно постоянно обновлять приложение (это происходит в автоматическом режиме), нет необходимости отдельно разрабатывать версии для iOS и Android, так как PWA подстраивается под любые операционные системы и браузеры и т.д.

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

• Скрипт Service Workers называют «сердцем» PWA, так как через него идут все запросы из браузера. Сервис запускают отдельно от основного потока браузера. В задачи программы помимо перехвата сетевых запросов входит фоновая синхронизация (Background Sync), которая отвечает за кэширование (локальное сохранение данных) и извлечение ресурсов из кэша, что позволяет работать с приложением даже при отсутствии интернета. Также Service Workers отвечает за доставку push-уведомлений. Для кодировки используется JavaScript файл, который определяет логику работы с запросами и другие функциональные возможности.
• Второй ключевой компонент – Application Manifest (JSON-файл). Манифест передает браузеру информацию о веб-приложении (название, иконка, варианты отображения PWA (fullscreen, standalone и др.). Application Manifest определяет поведение PWA при добавлении на мобильные и десктопные устройства, отвечает за корректное отображение приложения (адаптивный дизайн) и позволяет веб-приложению выглядеть как обычная мобильная утилита с иконкой на экране смартфона.
• Обязательно наличие валидного (соответствующего требованиям) и защищенного HTTPS-подключения домена (SSl-сертификат).

Также в структуру PWA входят: доступ к геолокации (Geolocation API) и доступ к камере и микрофону (Media API).

Отличие PWA от нативного приложения

Гибридный продукт PWA вобрал в себя функционал веб-сайта и автономного мобильного приложения.

Чем схожи и чем отличаются веб- и нативное приложения:

Способ установки

• Нативное приложение – это независимый продукт, который разрабатывается специально под заказчика, под определенную ОС (операционную систему) пользователи могут скачать его из сторов (магазинов приложений) и установить на свои смартфоны.
• Для прогрессивного веб-приложения PWA скачивание и установка через магазин не требуется, оно работает напрямую через веб-браузер. При этом у пользователя создается полная иллюзия, что он работает с обычным мобильным приложением – на домашний экран смартфона устанавливается иконка приложения, кликая на нее, клиент попадает на мобильную версию сайта. Например, у транспортной компании есть сайт, чтобы привлечь дополнительную аудиторию «из смартфонов» и не тратить средства на разработку отдельного мобильного приложения, они создали приложение PWA на базе существующего сайта. Это дешевле и быстрее.

Обновление

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

Размеры

Размеры PWA и нативного приложения заметно отличаются. Если максимальный вес веб-приложений – 1-3 Мб, то размеры автономных утилит могут достигать десятки мегабайтов. Например, приложение маркетплейса Леруа Мерлен для смартфона занимает 57,5 Мб, Яндекс.Карты – 181 Мб и т.д. На айфонах вес приложений еще больше. Так, на iOS 12.0 Leroy Merlin будет занимать 108,4 Мб.

Стоимость работ

Стоимость разработки нативного мобильного приложения зависит от многих факторов:

• для какой операционной системы будет создаваться: iOS (дороже) или Android (дешевле);
• локация разработчика (стоимость услуг специалистов из Европы или США будет выше, чем российских и индийских, например);
• количество фишек (дополнительные функции, привлекательные детали, улучшенные характеристики и т.п.). Чем больше особенностей, тем дороже продукт;
• авторский дизайн;
• создание бренда и т.д.

По расчетам vc.ru, разработка среднего мобильного приложения под ключ, включая аналитику, сбор требований, дизайн, тестирование, запуск, техподдержку, в 2022 году обойдется примерно в 1,5 млн рублей.

Сделать PWA приложение проще, потому что оно строится на базе уже действующего сайта с применением готовых сценариев Service Workers и Application Manifest, веб-приложение включает только самый необходимый функционал. Даже если у компании нет сайта, то создать его, плюс PWA, – все равно дешевле, чем разработать автономное мобильное приложение с нуля. Как сообщает вышеназванный источник, разработка и поддержка веб-приложений PWA обходится дешевле на 70-90 %.

Сроки изготовления

Для создания среднего по функционалу автономного приложения понадобится месяца три. Для PWA достаточно несколько дней. Если вы создаете веб-приложение через специальные сайты-конструкторы, например, PWA-маркет – хватит 5 минут.

Безопасность

• Безопасность прогрессивного веб-приложения обеспечивает HTTPS сайта (защищенный протокол передачи данных в интернете), на котором базируется приложение.
• Для скачанного со стора мобильного приложения требуется добавлять защиту.

Получение push-уведомлений

Оба вида приложений поддерживают эту функцию.

Работа в режиме офлайн

PWA и нативное приложение могут работать при отсутствии доступа к интернету.

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

• веб-приложение, как и сайт, индексируется поисковиками;
• у них одна система управления;
• работают на всех устройствах;
• не требуют установки и обновлений.

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

Плюсы и минусы PWA

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

Главный недостаток PWA – отсутствие доступа к уникальным аппаратным настройкам и опциям платформы. В современных смартфонах и айфонах много новейшего функционала, а PWA имеет доступ только к камере, микрофону и геолокации. Так как нативные мобильные приложения создаются под конкретную операционную систему (iOS или Android), то они используют все технологические возможности цифровой платформы. Например, в iOS им доступны такие популярные функции как Touch ID, Face ID, ARKit, Bluetooth и др.

Также среди недостатков PWA – более низкий трафик. Чтобы найти веб- приложение, надо сначала найти сайт, к которому оно прикреплено. Большинство пользователей скачивают приложения через сторы (магазины приложений): App Store, Google Play. Даже если вы загрузите PWA в сторы, пройти модерацию будет сложно.

Какие задачи решает PWA

PWA можно заказать для решения следующих задач:

• Вы хотите получить для сайта дополнительный оперативный канал взаимодействия с клиентами – приложение PWA сайта работает быстрее, чем сайт.
• Вам нужно повысить вовлеченность клиентов, например, чтобы у них была возможность быстрого доступа к повторным заказам, и при этом сэкономить. С приложением PWA вам не нужно тратиться на ретаргетинг/ ремаркетинг, чтобы вернуть клиентов, достаточно сделать рассылку push-уведомлений.
• Вы ограничены в сроках и нужно быстро создать приложение.
• Вы ограничены в средствах, а приложение необходимо.
• Вы хотите оценить эффективность приложения, как такового. Прежде чем приступать к разработке дорогостоящего нативного приложения, можно провести тестирование гипотезы на PWA с минимальными затратами.

Каким категориям бизнеса подходит

PWA подходит всем категориям бизнеса, где идет регулярное взаимодействие с клиентами. Например, в сфере услуг (салоны красоты, автосервисы, клининговые компании и др.), в сфере общественного питания (рестораны, кафе, пиццерии, службы доставки еды), интернет-магазины, учебные онлайн-заведения и курсы, интернет-СМИ и многие другие.

Создание PWA приложения

Обычному пользователю, который не обладает необходимой компетенцией, сложно создать PWA приложение самостоятельно. Это задача для IT-разработчиков. Продвинутые пользователи могут прибегнуть к помощи специализированных сайтов-конструкторов, например, PWA-маркет. Услуга платная, стоимость подписки – от 65 до 990 $, количество PWA, которые можно конструировать – от 5 до 200 штук, в зависимости от тарифа. Согласно обзору protraffic.com, в итоге вы получите следующие продукты:

• Собственный домен, если у вас до этого не было сайта.
• PWA приложение с индивидуальным дизайном и оффером (торговое предложение). Есть большой выбор готовых шаблонов.
• Встроенный трекер для сбора информации о пользователях (локация, тип устройства, IP-адрес);
• Встроенный функционал для рассылки push-уведомлений;
• Встроенная клоака и генератор «белых страниц» (white pages). Для понимания, клоака – это специальные скрипты, которые прописываются на сервере для фильтрации посетителей. Если на ресурс зашли поисковые роботы и модераторы, то им показываются страницы, оптимизированные под требования конкретной платформы, обычные пользователи видят основные объявления с ТП.
• Возможность быстро, в один клик, вносить изменения в PWA.

Этапы создания PWA

Зарегистрируйтесь на PWA.Market: укажите электронный адрес, Телеграмм-канал, придумайте пароль.

Получите доступ к личному кабинету, на панели сбоку выберите строчку «Мои PWA» и нажмите кнопку «Создать новое».

Далее подключите домен. Платформа предлагает свои домены, если вы соглашаетесь, то жмете «Далее». Если хотите работать на собственном домене, то выбираете кнопку «У меня есть свой домен», прикрепляете его через сервис CloudFlare.com. Подсказки есть в Инструкции.

Выберите дизайн будущего веб-приложения из готовых шаблонов. Если хотите создать собственный дизайн, то нажмите на кнопку «Загрузить свой» или копируйте из Google Play.

Настройте необходимые параметры. Укажите название приложения, кто автор, категория бизнеса (интернет-магазин, служба такси, доставка еды и т.д), размер приложения, сколько установок и т.д. Также обозначьте ограничения по возрасту и выберите рейтинг. Составьте описание приложения или воспользуйтесь шаблонными текстами из списка.

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

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

Нажмите кнопку «Сохранить». Во вкладке «Мои PWA» появится ссылка на готовое приложение. Сделайте предпросмотр, в случае необходимости внесите правки. Также в этом сервисе помимо веб-приложения можно создать push-уведомления, смотреть аналитику поведения пользователей.

Установка PWA с сайта

Чтобы пользователь захотел установить на телефон приложение с сайта, компания должна, в первую очередь, заинтересовать клиента в том, чтобы он скачал ее приложение. Можно предложить особые условия продажи на мобильной утилите. Например, интернет-магазин La Redoute самые большие скидки обычно предлагает в приложении. На сайте компании висит плашка, которая напоминает об этом. Или можно подарить за установку приложения скидку 25 % на первый заказ. Подобную акцию в свое время проводил маркет обуви Rendez-Vouz: посетителям офлайн-магазина предлагали установить приложение тут же, в салоне, взамен давая весомую скидку на покупку. Способов привлечь клиента много.

Если говорить о процессе установки PWA с сайта, то тут все просто.

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

Каждый собственник приложения должен помнить – недостаточно того, чтобы пользователь скачал ваш продукт. Важнее, как ведет себя утилита в процессе работы. Если не продумана навигация, часто происходят сбои, то покупатель скорее всего откажется от такого приложения, тем более, что удалить его – дело одной секунды. Поэтому следите за техническими параметрами PWA. Также не забывайте про контент и дизайн – картинка должна нравиться, содержание должно быть интересным для пользователя.

Вывод

Прогрессивные веб-приложения PWA – полезная вещь, если вам нужно быстро и недорого создать мобильное приложение на базе сайта. PWA по принципу работы напоминает нативные приложения, но эти два вида утилит сильно разнятся в плане возможностей. Среди преимуществ PWA – невысокая стоимость, несложная разработка, небольшой вес (1-3 Мб), не нужно обновлять вручную, веб-приложения индексируются поисковиками, может работать на любой OC. Недостатки – ограниченный функционал (у PWA нет доступа к большинству функций операционной системы и аппаратным опциям), невысокий уровень трафика по сравнению с нативными приложениями. PWA – быстрый и доступный способ стать ближе к вашему клиенту, а также первый шаг к созданию полноценного мобильного приложения.

Специалисты digital-интегратора «Цифровой элемент» готовы создать PWA-приложения для вашего веб-проекта, а также полноценное нативное мобильное приложение.

Разработка PWA

Заказать услугу