Цифровой элемент
10 минут на чтение Отправь статью на почту?

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

Как создать PWA приложение из сайта и почему разработка PWA обходится дешевле обычных мобильных приложений? Достаточно ли для бизнеса приложения PWA и какие задачи оно решает? О главных отличиях веб-приложений нового поколения – расскажем сейчас.

Подписаться
89

Содержание

Что такое 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 и др.

Приложения Telegram
Приложения Telegram

Структура 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 на базе существующего сайта. Это дешевле и быстрее.

Обновление

  • Автономные мобильные приложения через определенные промежутки времени запрашивают обновления. Пользователь должен нажать на кнопку, подождать, пока программа перезагрузится. Предложения переустановки приходят довольно часто и в самый неподходящий момент, когда человек открыл приложение и готов с ним работать. Часто это вызывает недовольство.
  • Веб-приложения переустанавливать в ручном режиме не надо, обновление 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 и нативных приложений. Данные Rabota.ru Q1 2022
Оклады разработчиков PWA и нативных приложений. Данные Rabota.ru Q1 2022

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

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

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

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

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

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

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

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

 Сравнительная таблица PWA и автономных мобильных приложений
Сравнительная таблица PWA и автономных мобильных приложений

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

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

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

Таблица доступных опций для PWA, веб-сайта и автономного приложения
Таблица доступных опций для PWA, веб-сайта и автономного приложения

Плюсы и минусы 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.Market
Конструктор веб-приложений PWA.Market

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

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

Регистрация на PWA.Market

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

Доступ к личному кабинету

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

Подключение домена

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

Выбор дизайна

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

Настройка параметров

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

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

Технические настройки PWA

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

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

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

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

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

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

Вывод

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

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


Мне не нравится
Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Блог

Микроразметка schema.org
Микроразметка schema.org

Schema.org – микроразметка, позволяющая структурировать данные на сайте для поисковых систем. С ее помощью поисковые системы понимают, какие данные...

28 мая 2019
95959
TОП-40 плагинов Figma
TОП-40 плагинов Figma

Для создания дизайнов и прототипов большинство современных дизайнеров использует Figma. Его основное преимущество перед другими графическими прогр...

11 марта 2021
93376
Как попасть на Яндекс.Карты, Google.Карты, 2GIS
Как попасть на Яндекс.Карты, Google.Карты, 2GIS

Если ваша компания ведет бизнес офлайн, размещение на Яндекс.Картах и Google и 2GIS поможет рассказать об этом потенциальным клиентам. Присутствие...

17 июля 2019
91872
404 ошибка – страница не найдена
404 ошибка – страница не найдена

404 ошибка (страница не найдена) – это ответ сервера, который возникает, когда сервер не может отобразить запрашиваемую страницу по указанному адре...

13 августа 2019
40119
Семантика сайта
Семантика сайта

Семантическое ядро – это набор фраз, соответствующих поисковым запросам пользователей в поисковых системах, которые характеризуют определенную тема...

21 октября 2019
17648
Как предоставить гостевой доступ к Яндекс Директ и Google Adwords
Как предоставить гостевой доступ к Яндекс Директ и Google Adwords

Контекстная реклама — один из самых простых и быстрых способов увеличения посещений веб-сайта. Особенностью этого инструмента является понятность р...

19 января 2021
13705
Как составить ТЗ на разработку сайта
Как составить ТЗ на разработку сайта

ТЗ (техническое задание) – очень полезный документ, в котором описаны все разделы сайта, все элементы страницы и функциональность всех модулей. Пол...

14 мая 2021
12699
Микроразметка Open Graph
Микроразметка Open Graph

Open Graph – стандарт микроразметки, который позволяет формировать превью сайта при публикации в социальных сетях. Стандарт Open Graph был р...

5 ноября 2019
10458
Сброс кеша DNS в Google Chrome
Сброс кеша DNS в Google Chrome

Для сброса кеша DNS в Google Chrome: Введите в адресной строке браузера chrome://net-internals/#dns и нажмите кнопку Clear host cache; Зат...

31 января 2020
9489
Анализ сайта с помощью Яндекс.Метрики
Анализ сайта с помощью Яндекс.Метрики

Яндекс.Метрика – инструмент анализа аудитории сайта. Метрика позволяет сегментировать данные, определять целевую аудиторию сайта, достигать целей и...

20 декабря 2019
8886
Золотой партнер<br>1С-Битрикс
Золотой партнер
1С-Битрикс
Сертифицированное агентство <br>Яндекс.Директ
Сертифицированное агентство
Яндекс.Директ
Сертифицированное агентство <br>Google.AdWords
Сертифицированное агентство
Google.AdWords
Региональный партнер <br>Ru-center
Региональный партнер
Ru-center
Золотой партнер  <br>Битрикс24
Золотой партнер
Битрикс24