Progressive Web App: что это и когда заменяет мобильное приложение

Привет! Если вы хоть раз задумывались о том, насколько сложно поддерживать сразу несколько мобильных приложений — одно для iOS, другое для Android — а ещё отдельный сайт, то наверняка слышали аббревиатуру PWA. Давайте честно: в последние пару лет про прогрессивные веб-приложения говорят едва ли не на каждом углу. Но что это на самом деле такое? И правда ли они могут заменить привычные “родные” приложения из App Store и Google Play?

Расскажу с позиции разработчика, который сам вовремя “подсел” на эту тему.

Простыми словами: Что такое PWA?

PWA (Progressive Web App) — это не магия и не очередной модный термин ради хайпа. Это тип веб-приложения, который собирает лучшее сразу из двух миров: простоту доступа обычного сайта через браузер и ощущение от использования “нативки” (так мы называем классические мобильные приложения). То есть для пользователя всё выглядит так: открыл сайт — увидел предложение “добавить на главный экран” — и вот у тебя уже почти полноценное приложение, без скачивания из магазинов и долгих обновлений.

Как вообще работают эти ваши PWAs?

За красивой обёрткой стоит несколько хитрых технологий. Вот основные “ингредиенты”.

Service Workers — сердце автономности

Если свежий взгляд: service worker — это такой фоновый работник (скрипт), который незаметно для пользователя обслуживает часть запросов между сайтом и сетью. Он умеет ловить обращения к серверу, кэшировать файлы (картинки, стили, даже сами страницы), а значит — ваше приложение продолжает нормально работать даже когда интернет барахлит или совсем пропал. Я как-то познакомился с этим впервые именно когда делал новостной сайт для поездок за городом: можно читать свежие материалы даже там, где мобильная сеть еле-еле ловит. Очень впечатляет!

Плюсом та же технология лежит в основе пуш-уведомлений без привычных SDK.

Web App Manifest — паспорт приложения

У любого приличного PWA есть свой manifest.json. Это как технический паспорт у автомобиля: записано всё важное — название (“Как отображаться под иконкой?”), картинки (какая иконка попадёт на домашний экран телефона), фирменные цвета… Благодаря этому файл пользователю предлагается “установить” страницу прямо на главный экран смартфона. Никакие App Store ждать не нужно.

HTTPS Only! Безопасность прежде всего

Серьёзный момент: ни один современный браузер не разрешит запускать PWA по небезопасному протоколу http://. Только шифрованный https://. И тут дело не только в безопасности логинов и паролей; через защищённое соединение сервис-воркеры реально могу контролировать все сетевые запросы вашего приложения.

А зачем мне переключаться на PWA? Вот здесь о плюсах

• Одна кодовая база
  Устали писать две разные версии одной идеи для iOS и Android? С PWA достаточно поддерживать единый проект. Экономия времени и бюджета просто колоссальная. Живая история из практики: в одном стартапе мне пришлось за месяц переписать кусок функциональности для обеих платформ — оставь у нас тогда был бы PWA…
• Нет очереди в магазинах
  Не нужно проходить долгую ручную модерацию в Apple или платить комиссию Google за размещение или обновления («выгрузили версию с багфиксом» — жди сутки!). А ведь иногда надо быстро закатить новую функцию или исправить ошибку здесь и сейчас.
• Мгновенный старт
  Сайты бывают тяжёлыми (пару мегабайт картинок плюс загрузка всего интерфейса разом) — но в PWA пользователь получает необходимое “ядро” максимально быстро; всё остальное догружается по мере движения по приложению.
• SEO работает
  В отличие от нативных приложений страницы PWA индексируются поисковиками как обычные сайты. Бонус при продвижении очевиден: можно поймать трафик вообще с любой поисковой системы.

Где прогресс буксует? Минусы тоже есть

• Apple держит оборону
  Реальность такая: если ваш главный сегмент аудитории пользуется iPhone’ами чуть не с первой версии, то возможностей будет меньше чем у аналогичного Android-сервиса (например, push-уведомления появились совсем недавно; работают местами капризно).
• Аппаратное железо пока под замком
  Доступ к Bluetooth, файловой системе уровня самого устройства, контактов или использования FaceID всё ещё сильно лимитирован браузерами из соображений безопасности и приватности пользователей.

Когда хватает одного PWA?

На практике вижу такие примеры практически каждый месяц:

• E-commerce / интернет-магазины
  Пользователь ищет какой-то товар через гугл – заходит на вас впервые – душа радуется мгновенной загрузке карточек товара даже если интернет тянет еле-еле… Заказ оформил прямо с сайта без лишних скачиваний!
• СМИ/новостные порталы/информационные публикации
  Уведомления о новой статье приходят как сообщения – люди реагируют сразу, а скорость открытия страниц очень важна для удержания внимания.
• Корпоративные системы / B2B сервисы
  Тут часто требуется глоток воздуха вне офиса или плохое покрытие интернета; главная фишка – офлайн-доступ к основным данным.
• Запуск MVP/стартапа
  Быстро протестировать идею без вложений в разработку сразу под две разные платформы? Минимум расходов + обратная связь моментально = идеальный инструмент для быстрого старта и сбора первых отзывов.

Когда всё-таки нужен “натив”?

Жизнь жёстче любого маркетинга: некоторые кейсы пока не под силу никаким браузерам.

• Сложные игры/ресурсоёмкая графика
  Если рисуете что-то вроде Fortnite или Genshin Impact – без доступа к внутренностям железа нет смысла делать через веб-технологии (простой пример – анимация физики персонажей при просадке FPS).
• Постоянная фоновая работа
  Например отслеживание геолокации курьера в режиме реального времени когда у него выключен экран; обработка сигнала от сенсоров без постоянного подключения к сети – сейчас возможно только через «нативу».
• Интеграция со специфическими функциями устройства
  Разблокировка банковского счета лицом (FaceID) или запись показаний био-сенсоров требуют особого уровня доверия ОС; тут браузеру просто «не дадут» такой доступ ради безопасности данных пользователя.

Всё больше браузеров получают новые функции почти каждый квартал — кто-то год назад говорил “да никогда!”, а сегодня уже возможна интеграция с NFC-чипами или отправка сложных пушей даже на айфоне! Так что мой совет простой – оценивайте задачу по её сути. Иногда для максимальной скорости выхода на рынок разумно делать ставку на гибкий формат вроде PWA; иногда требования бизнеса диктуют создание мощной нативки со всеми прибамбасами OS… Впрочем, порой самый удачный путь вообще оказывается комбинированным: сильная веб-платформа + добротное нативное приложение там, где оно реально нужно.

Иначе говоря — смело пробуйте подходы! Кто знает, вдруг ваша следующая идея прекрасно взлетит уже завтра именно благодаря развитию прогрессивных технологий?