Откройте на телефоне сайт Pinterest или Starbucks через браузер. Нажмите на меню — и в выпадающем списке появится пункт «Добавить на главный экран». После этого на главном экране устройства появится иконка сайта — точно такая же, как у нативных приложений. По тапу откроется приложение без адресной строки браузера, его можно использовать офлайн, оно умеет показывать push-уведомления. Из App Store или Google Play ничего скачано не было. Это и есть PWA — обычный сайт, который ведёт себя как нативное приложение.
Что значит сама аббревиатура
PWA — Progressive Web App, «прогрессивное веб-приложение». Прогрессивное — значит, что одна и та же кодовая база постепенно «улучшается» в зависимости от того, что умеет браузер пользователя:
- В старом браузере без поддержки service worker PWA остаётся обычным сайтом — работает, но без офлайна и установки.
- В современном Chrome или Edge тот же сайт уже умеет ставиться на рабочий стол, кэшировать страницы для офлайна, получать push-уведомления.
- На мобильном устройстве к этому добавляется иконка на главном экране и запуск в полноэкранном режиме без UI браузера.
То есть PWA — не отдельная технология, а набор веб-стандартов плюс соглашение о том, как их комбинировать. Главных стандарта три: HTTPS, Web App Manifest и Service Worker. Их разберём в следующих главах.
Что PWA умеет
На пользовательском уровне набор такой:
- Установка на устройство. Иконка появляется на главном экране телефона или на рабочем столе на десктопе. Запускается приложение в собственном окне, без адресной строки и вкладок.
- Работа офлайн. Уже посещённые страницы открываются без сети. Если сети нет совсем — показывается заранее подготовленный offline.html вместо обычной ошибки ERR_INTERNET_DISCONNECTED.
- Push-уведомления. Сервер может разбудить приложение и показать уведомление, даже если вкладка закрыта.
- Интеграция с ОС. Открытие конкретных URL прямо в PWA (минуя браузер), badging (число на иконке, как в почтовом клиенте), share target (PWA становится возможным получателем в системном меню «Поделиться»).
- Доступ к части аппаратуры. Геолокация, камера, микрофон, push, уведомления — через стандартные веб-API.
Кто это уже использует
PWA — не экспериментальная игрушка. На ней работают сервисы с миллионами пользователей, и у этих кейсов есть публичные метрики:
- Pinterest — после перехода на PWA пользователи стали проводить на +40% больше времени на сайте, рекламная выручка с мобильного веба выросла на +44%, общая вовлечённость — на +60%. До сих пор один из самых громких кейсов в индустрии.
- Starbucks — PWA-версия примерно в шестьсот раз меньше нативного приложения для iOS по весу. После запуска удвоилось количество онлайн-заказов: форма работает офлайн, важно тем, кто оформляет заказ в метро или на спорной мобильной сети.
- Flipkart — крупный индийский маркетплейс. 60% пользователей, которые когда-то удалили нативное приложение, вернулись через PWA.
- Lancôme — косметический бренд снизил время до интерактивности на 84%, конверсия мобильного веба выросла на +17%, мобильные сессии — на +53%.
Этих метрик достаточно, чтобы PWA стала стандартным выбором для веб-сервисов, у которых важна мобильная аудитория и есть смысл бороться за каждую секунду первого экрана.
PWA, нативное приложение и гибрид: где PWA на карте
На рынке мобильной разработки сейчас три основных подхода. Чтобы не путаться, держите их рядом:
| Подход | Стек | Где запускается | Где живёт |
|---|---|---|---|
| Нативное | Swift / Kotlin | Под одну ОС | App Store / Google Play |
| Гибрид / кросс-платформа | React Native, Flutter, Capacitor | Под обе ОС из одной кодовой базы | App Store / Google Play |
| PWA | HTML / CSS / JS | Любой современный браузер | Сайт + опционально магазины (TWA, PWABuilder) |
PWA выигрывает там, где важны охват и скорость поставки: одна кодовая база, мгновенные обновления, не нужно проходить ревью магазинов, индексируется поисковиками. Проигрывает там, где требуется глубокая интеграция с системой (сложная работа с файлами, AR/VR, фоновые задачи без ограничений, биометрия в полном объёме на iOS).
Что под капотом
Чтобы обычный сайт стал PWA, нужны три ингредиента, которые в следующих главах разберём по отдельности:
- HTTPS. Без шифрованного соединения браузер не разрешит регистрировать service worker. Исключение — localhost для разработки.
- Web App Manifest — JSON-файл, который описывает приложение для ОС: имя, иконки, цвета, режим запуска.
- Service Worker — фоновый JavaScript, который перехватывает сетевые запросы, кэширует ресурсы и принимает push-уведомления.
Минимальный набор для базового PWA — это вот эти три пункта плюс корректный <meta name="viewport">, чтобы сайт нормально отображался на мобильных. С этого — следующая глава.
