«Хочется сделать мобильное приложение, но бюджет на разработку небольшой» — с таким запросом к нам часто обращаются клиенты. Стоимость разработки под Android и iOS действительно исчисляется миллионами — как в недавней истории с владельцем сети отелей, которому в другой студии выставили счет в 4 млн ₽ только за одну платформу.

К счастью, выход есть. Это технология PWA (Progressive Web App), которая помогает запустить продукт быстрее и с меньшими затратами.

PWA — что это и почему их считают альтернативой обычным приложениям?

Если говорить простыми словами, PWA — это технология, благодаря которой сайт начинает выглядеть и работать как настоящее мобильное приложение.

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

PWA установка

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

PWA на десктопе

PWA заимствует ключевые функции у классических приложений:

  1. Устанавливается на смартфон и запускается одним нажатием на иконку.
  2. Быстро загружается. Когда человек впервые заходит в PWA, специальный скрипт (Service Worker) сохраняет в кэш устройства основные элементы приложения: интерфейс, стили, иконки и даже некоторые данные (например, уже просмотренные статьи или товары).
  3. Приложением можно пользоваться даже без подключения к сети. В более продвинутых PWA можно даже совершать действия, например, добавлять товары в корзину или писать сообщения. Эти действия сохраняются на устройстве и автоматически отправляются на сервер, как только появляется интернет.
  4. Отправляет push-уведомления о новых акциях, новостях или любых других важных событиях. PWA может получать и отображать пуши даже когда само приложение закрыто или браузер свернут.
  5. PWA получает доступ к некоторым функциям смартфона: камере, микрофону и геолокации (есть ограничения, о них позже).

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

Экономика проекта: PWA против нативной разработки

Главное преимущество PWA — это экономия ресурсов. Но чтобы понять, в чем именно заключается эта экономия, давайте сначала разберемся, что значит «нативная разработка»?

Нативная (или «родная») разработка — это классический подход, при котором для каждой операционной системы (iOS и Android) пишется отдельное, независимое приложение. По сути, это создание двух разных продуктов с нуля.

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

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

  1. Стоимость. Разработка нативного приложения для одной платформы стартует от 4-х млн рублей. Для запуска на обеих платформах бюджет удваивается. PWA обходится в 2–10 раз дешевле, поскольку использует стандартные веб-технологии (HTML, CSS, JavaScript) и не требует написания кода на Swift или Kotlin.
  2. Сроки запуска. Если у вас уже есть работающий сайт, PWA можно запустить всего за 2 недели, а создание даже минимальной версии (MVP) нативного приложения займет от трех месяцев.
  3. С PWA вы можете выпускать обновления мгновенно. Вы обновили сайт, и пользователь сразу видит изменения. А вот с нативными и кроссплатформенными приложениями каждое изменение — это ожидание до недели, пока модераторы App Store и Google Play одобрят новую версию.
  4. Регулярные расходы. Владельцам нативных приложений приходится не только делиться доходом с App Store и Google Play (комиссия может достигать 30%), но и оплачивать ежегодный доступ к платформе, а также финансировать две разные команды разработчиков для версий на iOS и Android. С PWA вы платите только за хостинг и поддержку кода. Комиссий App Store и Google Play нет — приложение устанавливается прямо с сайта.

Преимущества PWA

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

  1. Удобство для пользователя. Универсальность — ключевое преимущество PWA: они работают на любом современном смартфоне, планшете или компьютере. Установка происходит в три клика, приложение открывается мгновенно, работает офлайн и обновляется автоматически.
  2. Рост конверсии и вовлеченности. Иконка на главном экране и пуши об акциях и новостях постоянно напоминают пользователю о вашем бизнесе и побуждают возвращаться снова и снова.
  3. Высокая производительность. Благодаря кэшированию страницы загружаются мгновенно, что снижает количество отказов.
  4. Видимость в поиске. В отличие от нативных приложений, PWA — это по своей сути сайт, поэтому его страницы индексируются Яндексом и Google.
  5. Безопасность. Технология PWA по умолчанию требует использования защищенного протокола HTTPS. Это снижает риск перехвата данных и подмены контента, делая приложение безопаснее для пользователя.
  6. Возможность персонализации. Вы можете собирать данные о поведении пользователей (какие разделы популярны, где возникают сложности) и на основе этого адаптировать контент под их интересы.

Недостатки и ограничения PWA

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

  1. Ограниченная работа на iOS. Apple жестко контролирует свою экосистему. Все PWA на iPhone и iPad вынуждены работать на движке WebKit (который используется в Safari), что ограничивает их функциональность. Push-уведомления работают не так стабильно, а фоновая работа почти не поддерживается.
  2. Ограниченный доступ к функциям смартфона. PWA не могут полноценно использовать некоторые возможности устройства, такие как NFC (частично), Bluetooth, биометрические данные (Face ID, Touch ID), а также технологии дополненной реальности (пока ограниченно).
  3. Повышенное энергопотребление. Код на JavaScript менее энергоэффективен, чем оптимизированный код, написанный специально для нативных приложений. Это значит, что PWA намного хуже справляются со сложными и «тяжелыми» задачами.
  4. Сложность поиска. Люди привыкли идти за приложениями в App Store или Google Play, а не устанавливать их с сайта. Поэтому вам придется отдельно рассказывать пользователям о приложении: размещать заметные баннеры на сайте или добавлять его на альтернативные площадки.

Для какого бизнеса PWA станет идеальным решением?

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

  1. Электронная коммерция. Для интернет-магазинов PWA — настоящая находка. Быстрая загрузка страниц и возможность просматривать товары офлайн улучшают пользовательский опыт и повышают продажи. Например, AliExpress после внедрения PWA увеличил конверсию для новых пользователей на 104%. Среди других впечатляющих результатов: в 2 раза увеличилось количество страниц, просматриваемых за один сеанс, на 74% выросло среднее время, проведенное пользователем на сайте за сессию.
  2. Новости и медиа. Новостные порталы и блоги используют PWA, чтобы читатели могли сохранять статьи и читать их без доступа к сети. Так, Forbes сократил время загрузки сайта с 6 до 0,8 секунды и удвоил вовлеченность аудитории.
  3. Сервисы и инструменты. Сервисы доставки еды, онлайн-бронирования, а также приложения для продуктивности (календари, заметки) отлично работают в формате PWA. Это подтверждает компания Starbucks, которая удвоила количество пользователей в день, запустив PWA.

Технологию уже активно используют многие крупные российские компании: Авито, Delivery Club, КиноПоиск, Спортмастер и другие.

PWA, натив или кроссплатформа: гайд по выбору

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

В каких случаях выбрать PWA. Технология идеально подходит для определенных задач: 

  1. Простая функциональность. Например, предоставить информацию и позволить что-то заказать или забронировать, не используя при этом аппаратные возможности самого смартфона.
  2. Очень маленький бюджет и сроки. Вам нужно быстро и недорого запустить дополнительный к сайту продукт.
  3. Нужны push-уведомления для взаимодействия с аудиторией, но без затрат на полноценное мобильное приложение.
  4. Аудитория приходит из поиска. Ваши клиенты находят вас в основном через Яндекс или Google, а не ищут целенаправленно в App Store.
  5. Сезонный или разовый спрос. Ваш бизнес носит сезонный характер, или услуга требуется пользователям лишь время от времени, поэтому им нет смысла постоянно держать приложение на устройстве.
PWA против классической разработки

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

  1. Сложная функциональность. Приложению необходим полный доступ к функциям смартфона: дополненной реальности (AR), биометрии (Face ID, Touch ID), NFC для платежей или сложным датчикам вроде гироскопа.
  2. Большинство ваших пользователей — владельцы iPhone и других устройств Apple. PWA на этих устройствах работает с сильными ограничениями.
  3. Критически важна производительность. Вашему продукту важна максимальная скорость, стабильность и надежная защита данных — это особенно критично для финансовых и медицинских сервисов.
  4. Достаточно времени и бюджета. У вас есть ресурсы на длительную разработку и последующее обслуживание двух разных приложений — одно для iOS, другое для Android.
  5. Высокая конкуренция. Ваши конкуренты уже задали высокую планку качества с помощью нативных приложений, и вам необходимо ей соответствовать.
  6. Ваш бизнес построен вокруг приложения, а не сайта (как, например, у Telegram или Uber).

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

Продолжаем сравнивать

В каких случаях выбрать кроссплатформенную разработку. Кроссплатформенная разработка — это своего рода «золотая середина». Вы создаете единый код, и приложение сразу готово для запуска и на iOS, и на Android. Для этого обычно используют такие технологии, как Flutter или React Native.

Когда же выбрать кроссплатформу:

  1. Аудитория сосредоточена на обеих платформах. Вам нужно, чтобы приложение было доступно и на iOS, и на Android, так как ваши клиенты равномерно распределены между операционными системами.
  2. Ваши задачи уже не может решить PWA, но бюджет на нативную разработку все еще ограничен. Кроссплатформа позволит сэкономить 30-50% бюджета, сохранив при этом расширенный функционал.
  3. Для проектов средней сложности. Ваше приложение должно уметь больше, чем просто показывать информацию, но ему не нужен исчерпывающий доступ к функциям устройства.
  4. Типовые бизнес-задачи. Вам нужно создать интернет-магазин с корзиной и оплатой, социальное приложение с чатами и лентой или фитнес-трекер с отслеживанием базовых метрик.

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

***

Если вы не уверены, какое решение подойдет вашему проекту — напишите нам. Разберемся и подскажем оптимальный вариант.