Не хотите тратить бюджет на отдельное мобильное приложение? Вы не одиноки. Разработка под iOS и Android – удовольствие не из дешёвых. Публикация в сторах тоже та ещё история: модерация, требования, комиссии. А ещё есть аудитория, которая принципиально не скачивает очередной апп. Что делать?
Есть вариант проще. PWA – веб-сайт, который притворяется приложением. Причём убедительно притворяется. Работает офлайн. Шлёт push-уведомления. Устанавливается на главный экран одним касанием. И никакой модерации App Store. Мы в KOTELOV сделали PWA для аукциона автомобилей Газпромбанк Лизинг – выглядит как полноценное приложение, а обошлось в разы дешевле нативки.
Дальше разберёмся, что это за зверь такой, когда он спасает, а когда лучше не рисковать.
+65%
страниц за сессию
у Twitter Lite*
+76%
к конверсии
у Alibaba
в 2-3 раза
дешевле нативной разработки
600 КБ
размер Twitter Lite* vs 100+ МБ нативного
PWA что это – простыми словами
Progressive Web App – технология, которая превращает обычный сайт в нечто мобильно-приложенческое. По сути это обычная веб-страница с суперспособностями. Добавляется на главный экран. Работает без интернета. Присылает уведомления. И всё это без похода в магазин приложений.
Как это вообще работает? Три кита под капотом.
Service Worker
Фоновый скрипт, который кэширует данные и даёт сайту работать в PWA offline режиме. Когда связь пропала, пользователь всё равно видит контент, а данные синхронизируются потом.
Web App Manifest
Файл настроек с иконкой, названием, цветами и всем, что нужно для установки на устройство. Ничего сложного.
HTTPS
Тут без вариантов – безопасность в PWA не опциональна, без шифрования ничего не заведётся.
Что умеет эта штука? Работает на любом устройстве, где есть браузер – хоть телефон, хоть холодильник с экраном. Адаптируется под любой размер. Загружается мгновенно даже при паршивом интернете. Обновляется сам, не требуя апдейтов из стора. А ещё индексируется поисковиками – попробуйте это провернуть с обычным приложением!
Преимущества PWA
Зачем вообще думать про PWA, если нативные приложения существуют?
Сторы не нужны совсем
Никакой модерации App Store, которая иногда тянется неделями – мы такое видели не раз, это больно. Нашли баг, исправили – пользователи сразу получают новую версию. И комиссию 30% платить не надо.
Работа без сети – реальность
PWA offline не маркетинговый трюк, а реальность. Service Worker кэширует страницы и данные, пользователь листает каталог в метро без единой палочки связи, а когда интернет появляется – всё синхронизируется. Мы это проверяли на практике: в проекте для S7 Airlines приложение бортпроводников работало прямо во время полёта, где с интернетом, мягко говоря, туго.
Push-уведомления работают
Да-да, как в обычном приложении. Возвращаете пользователей, напоминаете о брошенных корзинах, сообщаете об акциях. На Android это летает давно. На iOS поддерживается с 2023 года – Apple наконец сдались.
Экономия на разработке
Тут всё серьёзно. Один код вместо трёх отдельных кодовых баз для веба, iOS и Android. Одна команда. Один деплой. Это не «чуть дешевле» – это реально в разы меньше денег.
SEO работает из коробки – Google видит PWA как обычный сайт, индексирует страницы, учитывает контент, а нативное приложение так не умеет.
Ну и установка в один клик, без переходов в App Store, нажал «Добавить на главный экран» – готово, барьер ниже, конверсия выше.
Twitter Lite* весит 600 КБ
Нативный Twitter* – 100+ МБ. Почувствуйте разницу.
PWA vs нативное приложение
Теперь честно. PWA не заменит нативку везде. Где что работает лучше?
| Критерий | PWA | Нативное |
|---|---|---|
| Стоимость | Ниже в 2-3 раза | Высокая |
| Скорость разработки | Быстрее | Дольше |
| Производительность | Хорошая | Максимальная |
| Доступ к камере, GPS | Да | Да |
| Bluetooth, NFC, Face ID | Ограниченно | Полный |
| Работа офлайн | Да | Да |
| Push-уведомления | Да | Да |
| Публикация в сторах | Не обязательно | Обязательно |
| SEO | Да | Нет |
| Обновления | Мгновенные | Через сторы |
Ограничения есть. Не буду врать. Полного доступа к Bluetooth нет. NFC работает не везде. Face ID и Touch ID – только базовые сценарии. iOS исторически PWA не любила, хотя Apple постепенно исправляется.
Когда PWA – ваш выбор
Бюджет ограничен, а мобильное присутствие нужно вчера. Контентный проект: медиа, каталог, новости. E-commerce, где важен SEO. Надо быстро выйти на рынок. Аудитория терпеть не может устанавливать приложения.
Когда нужно нативное
Игры и тяжёлая графика – тут без вариантов. AR/VR. Полный доступ к железу устройства. Финтех с биометрией. Premium-продукт, где UX – это всё.
Мы в KOTELOV честно говорим клиентам: нужно приложение для бортпроводников с 12 интеграциями – делаем нативное, а если аукцион автомобилей с торгами в реальном времени – PWA справится отлично.
Progressive Web App примеры
Хватит теории. Как PWA работает в реальном мире?
Twitter Lite*
Быстрый, лёгкий, работает везде
+65% страниц за сессию, +75% твитов
Перешли на PWA – результат впечатляет
+60% к вовлечённости, время до интерактивности: с 23 до 5.6 секунд
Starbucks
Можно собрать заказ даже без интернета
Размер на 99.84% меньше iOS-приложения
Uber
Легковесная версия для регионов с плохим интернетом
Загружается за 3 секунды на 2G
Alibaba
Это не проценты ради статистики – это реальные деньги
+76% к конверсии
Аукцион автомобилей для Газпромбанк Лизинг
Наш проект: начали с адаптивного сайта, добавили PWA. Торги в реальном времени, система на 1000 одновременных пользователей.
Работает как приложение. Без страха перед блокировкой в App Store.
В России тоже примеры есть. Aviasales, 2ГИС, Aliexpress – все используют PWA-подход для части функций.
PWA для бизнеса
Кому реально нужен PWA? Не всем подряд. Но многим – точно.
E-commerce
Каталог товаров? Есть. Корзина? Есть. Оформление заказа? Работает. SEO индексируется, push уведомления возвращают покупателей, офлайн-режим даёт листать товары в подземке.
Медиа и контент
Новости, блоги, журналы — всё, где важна быстрая загрузка, кэширование статей и минимальный расход трафика.
Сервисы доставки
Отслеживание заказов, уведомления о статусе – PWA справляется без проблем.
Каталоги и справочники
2ГИС не зря выбрал этот подход.
Что получает бизнес? Стоимость привлечения ниже – не нужно тащить пользователя в стор, конверсия в установку выше. Охват больше — работает на любом устройстве с браузером. Возврат пользователей быстрее: push-уведомления делают своё дело. Работает в плохих сетях – кэширование и оптимизация решают проблему медленного интернета.
Когда PWA недостаточно?
Сложные программы лояльности с интеграцией Apple Wallet – тут мимо. Финтех с полноценной биометрией – нужно нативное. Приложения с тяжёлой бизнес-логикой на устройстве – тоже отдельный разговор.
Но для большинства бизнес-задач PWA – рабочий инструмент. Проверено.
PWA разработка
Как создать PWA? Технически не так страшно, если есть нормальный веб-сайт. Что нужно?
01
HTTPS
Обязательно, без шифрования PWA не заведётся, даже не пытайтесь.
02
Web App Manifest
JSON-файл с метаданными: название, иконки для разных размеров, цвета интерфейса, ориентация экрана, всё в одном месте.
03
Service Worker
JavaScript, который рулит кэшированием и офлайн-режимом, самая интересная часть с технической точки зрения.
04
Адаптивный дизайн
Само собой, PWA должен нормально выглядеть на любом экране.
Какие технологии использовать? Любой современный фреймворк подойдёт – React, Vue, Angular, все поддерживают PWA из коробки. Workbox от Google упрощает работу с Service Worker. Next.js и Nuxt.js имеют встроенную поддержку.
Как выглядит процесс? Сначала аудит текущего сайта: Lighthouse в Chrome покажет, что уже готово, а что нет. Потом добавление manifest.json, это несложно, но важно правильно настроить иконки для разных платформ. Дальше Service Worker и стратегии кэширования – тут зависит от контента. Оптимизация производительности: PWA должен грузиться быстро. Тестирование офлайн-режима: отключаем интернет и проверяем, работает ли всё как надо. Настройка push-уведомлений, если они нужны.
Мы в KOTELOV подходим к веб-разработке с учётом PWA-возможностей. В проекте дизайн-конструктора для УЮТ сделали сложную систему с конструктором товаров и интеграцией с производственной базой. При необходимости такой проект расширяется до PWA – архитектура это позволяет.
Почему выбирают KOTELOV для разработки PWA
Мы не просто пишем код. Помогаем выбрать правильное решение.
Опыт веб-разработки
Больше 100 проектов за плечами, работали с Газпромбанк Лизинг, S7 Airlines, Буше, знаем, как делать сложные системы.
Современный стек
React, Vue, TypeScript, всё, что нужно для быстрого и надёжного PWA.
Понимание бизнеса
Не предлагаем PWA там, где нужна нативка, и наоборот, честно говорим, что подойдёт для конкретной задачи.
Полный цикл
От аналитики до поддержки: начинаем с бизнес-требований, проектируем архитектуру, разрабатываем, тестируем, запускаем и поддерживаем.
Посмотрите наши кейсы: аукцион автомобилей с PWA, где реализовали торги в реальном времени и мобильную версию, или дизайн-конструктор с миллиардом комбинаций товаров.
Итоги
PWA не панацея, а правильный инструмент для определённых задач.
Бюджет ограничен, нужен SEO, аудитория не любит сторы? PWA отлично подойдёт. Нужна игра, AR или полный доступ к железу телефона? Смотрите в сторону нативной разработки.
Хорошая новост: необязательно решать прямо сейчас. Можно начать с веб-сайта, добавить PWA-функции, а потом уже думать про нативное приложение, если понадобится.
*продукт компании Meta – запрещена в РФ