Progressive Web App¶
Progressive Web App (PWA, прогрессивное веб-приложение) — это тип прикладного программного обеспечения, создаваемого с использованием стандартных веб-технологий (HTML, CSS, JavaScript), но способного функционировать и выглядеть как нативное приложение для конкретной операционной системы. PWA объединяет в себе преимущества веб-сайтов (доступность через браузер, отсутствие необходимости в установке из магазина приложений) и нативных приложений (работа в офлайн-режиме, отправка push-уведомлений, доступ к некоторым аппаратным функциям устройства). Ключевой особенностью является то, что PWA не требует компиляции в бинарный код для каждой платформы и распространяется через интернет, а не через официальные маркетплейсы.
¶История
Концепция PWA была впервые предложена инженером Google Алексом Расселом в 2015 году. Термин «Progressive Web App» был введён для описания веб-приложений, которые используют современные возможности браузеров для предоставления пользовательского опыта, сравнимого с нативными приложениями. Основой для развития PWA послужили технологии Service Worker (впервые реализованы в Chrome в 2014 году) и Web App Manifest (спецификация, представленная W3C в 2013 году).
В 2016 году Google и Microsoft объявили о поддержке PWA в своих операционных системах (Chrome OS и Windows 10 соответственно). В 2017 году Apple, несмотря на первоначальный скептицизм, начала добавлять ограниченную поддержку PWA в Safari на iOS. К началу 2020-х годов PWA стали стандартом для многих компаний, стремящихся снизить затраты на разработку и поддержку приложений для разных платформ.
¶Технические основы
PWA строится на трёх основных технологических компонентах:
¶Service Worker
Service Worker — это скрипт (файл JavaScript), который браузер запускает в фоновом режиме отдельно от веб-страницы. Он выполняет функции, не зависящие от активности пользователя на сайте:
- Кэширование ресурсов: позволяет приложению загружать контент из кэша при отсутствии интернет-соединения (офлайн-режим).
- Перехват сетевых запросов: Service Worker может перехватывать запросы к серверу и возвращать закэшированные данные или выполнять синхронизацию в фоне.
- Push-уведомления: получение и отображение уведомлений даже при закрытом браузере.
¶Web App Manifest
Манифест (файл manifest.json) — это JSON-файл, который содержит метаданные приложения: название, иконки разных размеров, цвет темы, ориентацию экрана, URL начальной страницы. На основе манифеста браузер или операционная система создаёт ярлык для приложения на рабочем столе или в меню «Пуск», а также определяет, как приложение должно отображаться (в полноэкранном режиме, без адресной строки браузера).
¶HTTPS
Для работы Service Worker и других критических функций PWA требуется безопасное соединение по протоколу HTTPS. Это обеспечивает защиту данных и предотвращает атаки «человек посередине». Исключение делается только для локальной разработки на localhost.
¶Ключевые характеристики
Согласно определению, сформулированному Алексом Расселом и Фрэнсисом Берриманом, PWA должны обладать следующими свойствами:
- Прогрессивность: работают в любом браузере, независимо от уровня его поддержки современных технологий.
- Адаптивность: корректно отображаются на любых устройствах (от смартфонов до настольных компьютеров).
- Независимость от соединения: базовая функциональность доступна без интернета.
- Приближенность к нативным приложениям: взаимодействие с пользователем через push-уведомления, иконки на рабочем столе.
- Свежесть: благодаря Service Worker приложение всегда обновляется до последней версии.
- Безопасность: передача данных только по HTTPS.
- Обнаруживаемость: поисковые системы (Google, Яндекс) могут индексировать PWA как обычные веб-сайты.
- Устанавливаемость: пользователи могут добавлять PWA на главный экран без посещения магазина приложений.
- Связываемость: PWA можно открывать по URL-ссылкам, что упрощает их распространение.
¶Отличия от нативных и гибридных приложений
| Характеристика | PWA | Нативное приложение | Гибридное приложение (например, на React Native) |
|---|---|---|---|
| Установка | Через браузер, без магазина | Из магазина приложений (App Store, Google Play) | Из магазина приложений |
| Доступ к устройству | Ограничен (камера, геолокация, акселерометр, Bluetooth — частично) | Полный (камера, микрофон, NFC, датчики, файловая система) | Полный (через мосты к нативному коду) |
| Офлайн-режим | Да (ограниченный кэш) | Да (полная локальная база данных) | Да |
| Обновления | Автоматические, через Service Worker | Через магазин приложений (ручное подтверждение) | Через магазин приложений |
| Размер | Несколько мегабайт (кэш) | Десятки-сотни мегабайт | Десятки мегабайт |
| Стоимость разработки | Одна кодовая база для всех платформ | Отдельная разработка для iOS и Android | Одна кодовая база, но сложнее настройка |
| Распространение | По ссылке, через поисковики | Только через магазины приложений | Только через магазины приложений |
¶Применение
PWA активно используются в различных сферах:
- Электронная коммерция: интернет-магазины (например, AliExpress, Flipkart, Ozon) используют PWA для повышения конверсии и снижения нагрузки на мобильные устройства.
- Медиа и новости: новостные агрегаторы (например, Telegram Web, Twitter Lite) и издатели (например, The Washington Post) применяют PWA для быстрой загрузки статей и офлайн-чтения.
- Социальные сети и мессенджеры: Pinterest, Instagram (продукт Meta, признанной экстремистской и запрещённой в РФ) (веб-версия), Telegram (веб-версия).
- Государственные и образовательные сервисы: портал «Госуслуги» (мобильная версия), платформа «Московская электронная школа».
- Финансовые сервисы: мобильные банки (например, Т-Банк, Альфа-Банк) используют PWA для быстрых операций, хотя для полного функционала требуются нативные приложения.
¶Критика и ограничения
Несмотря на преимущества, PWA имеют ряд недостатков:
- Ограниченный доступ к аппаратному обеспечению: на iOS (до версии 16.4) PWA не могли отправлять push-уведомления, а доступ к Bluetooth, NFC и датчикам Touch ID/Face ID отсутствует или сильно ограничен.
- Зависимость от браузера: на устройствах Apple Safari долгое время не поддерживал полноценный офлайн-режим и установку на главный экран.
- Проблемы с монетизацией: PWA не могут использовать встроенные механизмы покупок в магазинах приложений (In-App Purchase), что усложняет монетизацию для разработчиков.
- Отсутствие единого стандарта: разные браузеры (Chrome, Safari, Firefox, Edge) реализуют поддержку PWA с разной степенью полноты, что приводит к фрагментации.
- Сложность с отладкой: Service Worker и кэширование могут создавать проблемы с обновлением контента, особенно при агрессивном кэшировании.
¶Поддержка в России
В России PWA активно используются крупными интернет-компаниями. Среди примеров — мобильные версии «Яндекс.Карт», «СберБанк Онлайн» (частично), «ВКонтакте» (веб-версия), «Авито». Однако, по состоянию на 2024 год, Google Play (принадлежит компании Google LLC, которая признана в РФ нежелательной организацией) и App Store остаются основными каналами распространения приложений, и PWA не могут конкурировать с ними по охвату аудитории. В 2023 году Министерство цифрового развития, связи и массовых коммуникаций РФ рекомендовало разработчикам государственных информационных систем рассматривать PWA как альтернативу нативным приложениям для снижения затрат.
¶Источники
- Рассел, А. (2015). Progressive Web Apps: Escaping Tabs Without Losing Our Soul. Доклад на конференции Chrome Dev Summit.
- W3C. (2013–2023). Web App Manifest Specification.
- Google Developers. (2016–2024). Progressive Web Apps Documentation.
- Apple Inc. (2017–2024). Safari Web Content Guide.
- «Ведомости». (2023). Минцифры рекомендовало госорганам переходить на PWA.