progressive web app

Progressive Web App (PWA, прогрессивное веб-приложение) — веб-приложение, использующее современные веб-технологии для обеспечения функциональности, ранее доступной только в нативных мобильных приложениях: установку на главный экран, работу офлайн, push-уведомления, фоновую синхронизацию и доступ к аппаратным возможностям устройства. Термин ввёл Алекс Рассел из Google в 2015 году.

Три основных требования к PWA

Для того чтобы считаться PWA, веб-приложение должно соответствовать трём критериям:

1. Надёжность — приложение работает даже при отсутствии сети или нестабильном соединении, используя Service Worker для кэширования ресурсов и ответов API.
2. Скорость — быстрая загрузка и плавные анимации. PWA оптимизируют Critical Rendering Path и используют стратегии кэширования для мгновенного отклика.
3. Вовлечённость — установка на устройство, push-уведомления, полноэкранный режим, работа как нативное приложение без адресной строки браузера.

Service Worker: сердце PWA

Service Worker — JavaScript-скрипт, работающий в фоновом потоке, отдельном от основного потока браузера. Он перехватывает сетевые запросы приложения и может отвечать из кэша, изменять запросы или пропускать их к серверу. Service Worker регистрируется один раз и остаётся активным, даже когда вкладка закрыта.

Основные стратегии кэширования Service Worker:

• Cache First — сначала проверяет кэш; если ресурс есть — возвращает его, если нет — обращается к сети. Для статических ресурсов (изображения, JS, CSS).
• Network First — сначала идёт в сеть; при сбое возвращает из кэша. Для данных, которые должны быть актуальными.
• Stale While Revalidate — возвращает кэш немедленно и параллельно обновляет его из сети. Баланс скорости и актуальности.
• Cache Only / Network Only — используют только один источник.

Web App Manifest

Web App Manifest — JSON-файл, описывающий метаданные приложения для браузера: название, иконки, тема, стартовый URL, ориентация экрана и режим отображения. Ключевые поля:

• name и short_name — полное и краткое название для иконок.
• icons — набор иконок разных размеров (минимум 192x192 и 512x512 PNG).
• start_url — URL, открываемый при запуске установленного приложения.
• display — режим отображения: standalone (без браузерного UI), fullscreen, minimal-ui.
• theme_color и background_color — цвета для системной строки состояния и экрана-заставки.

Возможности PWA в 2024 году

Проект Project Fugu (Google) значительно расширил доступ PWA к аппаратным и системным возможностям:

• Push Notifications — уведомления даже при закрытом браузере (через Service Worker).
• Background Sync — отправка данных при восстановлении соединения.
• File System Access API — чтение и запись файлов на устройстве с разрешения пользователя.
• Web Bluetooth / Web USB / Web NFC — подключение к периферийным устройствам.
• Badging API — отображение счётчика на иконке приложения (как в нативных приложениях).
• Share Target API — получение данных через системное меню «Поделиться».
• Screen Wake Lock API — предотвращение засыпания экрана.

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

На Android браузер Chrome автоматически показывает баннер «Добавить на главный экран», когда сайт соответствует критериям PWA. На iOS Safari поддерживает базовую установку через «Поделиться → На экран Домой», но с ограниченной поддержкой Service Worker и Push Notifications (ограничение снято в iOS 16.4+). На Windows и macOS Chrome и Edge позволяют установить PWA как десктопное приложение через иконку в адресной строке.

Примеры успешных PWA

Twitter Lite, Uber, Pinterest, Starbucks, Flipkart, Financial Times, Telegram Web — всё это PWA. Twitter Lite снизил потребление данных на 70%, время до первого твита — на 30%, нагрузку на серверы — на 60%. Starbucks реализовала офлайн-меню, позволяющее делать заказы без интернета. Эти результаты демонстрируют, что PWA — не маркетинговый термин, а реальный способ улучшить продуктовые метрики.

Инструменты разработки PWA

Workbox — официальная библиотека Google для работы со Service Worker. Она абстрагирует сложность написания стратегий кэширования и интегрируется с webpack и Vite. Lighthouse — инструмент аудита PWA, встроенный в Chrome DevTools, проверяет соответствие всем критериям и выдаёт конкретные рекомендации. Vite PWA Plugin добавляет поддержку Service Worker и Manifest в Vite-проекты за несколько строк конфигурации.