Что такое PWA: практическое руководство по Progressive Web Apps
Разбираем, что такое Progressive Web App, как работают установка и offline-режим, какие возможности доступны PWA и чем они отличаются от нативных приложений.
Progressive Web App, или PWA, — веб-приложение, спроектированное так, чтобы надёжно работать и ощущаться естественно на устройстве. Оно открывается по обычному веб-адресу, но может иметь собственный идентификатор, устанавливаться, запускаться в отдельном окне и использовать разрешённые возможности браузера и системы.
PWA — сайт, который постепенно получает представление и возможности приложения, когда их поддерживают браузер и устройство пользователя.
Почему важно слово progressive
Базовый сценарий должен оставаться полезным, даже если отдельная возможность недоступна. Пользователь переходит по ссылке и работает в браузере; совместимая среда может дополнительно предложить установку, offline-сценарии, shortcuts, уведомления или более глубокую интеграцию.
Это progressive enhancement применительно к приложениям. Набор функций не будет одинаковым на всех устройствах, поэтому поведение на одной платформе нельзя обещать для каждой другой.
Три практических строительных блока
Защищённый origin
PWA обслуживается по HTTPS. Шифрование защищает трафик и даёт браузеру доверенный origin, к которому привязываются разрешения, хранилище и установленный идентификатор.
Web App Manifest
JSON-документ описывает установленное приложение: название, иконки, start URL, scope, цвета, ориентацию и режим отображения. Современный манифест также может объявлять скриншоты, shortcuts и системные интеграции.
Логика устойчивой работы
Service worker управляет запросами, кэшем, фоновыми событиями и обновлениями. Его регистрация сама по себе ещё не означает, что ключевые задачи работают без сети.
Что действительно умеет PWA?
Единого переключателя функций нет. Возможности приходят из отдельных Web API, полей манифеста и интеграций ОС; у каждой свои требования безопасности, разрешения и матрица поддержки.
Устойчивость к сбоям сети
Service worker может кэшировать оболочку, посещённые страницы или рабочие данные. Офлайн-режим проектирует разработчик: он не появляется автоматически.
Установка
Совместимый браузер добавляет приложение на домашний экран или в меню запуска и открывает его в отдельном окне.
Уведомления
Часть платформ поддерживает Web Push после явного разрешения. Правила и доступность заметно различаются.
Обычная ссылка
PWA сохраняет главное преимущество веба: URL можно отправить, проиндексировать и открыть без предварительной установки пакета.
В зависимости от платформы веб-приложение также может работать с камерой, микрофоном, файлами, буфером обмена, геолокацией, Bluetooth и share target. Такие функции намеренно защищены разрешениями и часто требуют действия пользователя.
Что происходит при установке?
Обычно браузер не копирует весь сервис в закрытый пакет. Он фиксирует идентификатор из манифеста, создаёт системную запись с названием и иконкой, а при запуске открывает start URL в запрошенном режиме.
Живой продукт остаётся на домене издателя, поэтому обновляется через веб. При этом кэш, открытые вкладки и новая версия могут сосуществовать — жизненный цикл обновления нужно проектировать явно.
PWA всегда работает офлайн?
Нет. «Есть service worker» и «работает без сети» — разные утверждения. Читалка может сохранять статьи, редактор — работать локально, а банку или совместному документу для основной задачи требуется соединение.
Поэтому технический отчёт должен показывать доказательства. PWAs.app разделяет декларации манифеста, статические сигналы service worker и фактически подтверждённое поведение.
PWA и нативное приложение
| Критерий | PWA | Нативное |
|---|---|---|
| Распространение | Ссылка, установка по желанию, иногда магазины | Обычно магазин или управляемый пакет |
| Обновления | Публикуются в вебе с управлением кэшем | Новый пакет скачивает устройство |
| Охват | Одна веб-кодовая база для многих платформ | Платформенный код или кроссплатформенный фреймворк |
| Доступ к системе | Широкий, но зависит от браузера и ОС | Обычно самая глубокая интеграция |
| Доступ до установки | Можно найти, открыть и попробовать по ссылке | Обычно сначала установка |
Один подход не всегда лучше другого. PWA особенно полезен, когда важны мгновенный доступ, распространение ссылкой, охват устройств и единый деплой. Нативная разработка сильнее для новейших API, сложной фоновой работы и глубоко платформенного опыта.
Ограничения, о которых важно знать
- Поддержка неодинакова. Поля манифеста и API различаются между Chromium, Safari и Firefox.
- Нет одной универсальной кнопки. Установка и критерии зависят от браузера.
- Хранилище может очищаться. Важные данные нельзя оставлять только в незащищённом локальном хранилище.
- Установка не гарантирует доверие. Она не делает сервис безопасным или одобренным магазином.
- Store-обёртка добавляет правила. Android-пакету всё равно нужны подтверждение домена и соблюдение политик платформы.
Как узнать хорошо сделанную PWA
Начните с продукта: понятная задача, адаптивный интерфейс и предсказуемое поведение при потере сети. Манифест должен стабильно идентифицировать приложение, содержать качественные иконки и удерживать навигацию в разумном scope.
Карточки PWAs.app показывают исходный URL, манифест, режим окна, иконки и обнаруженные возможности. Балл — компактный сигнал, а детали под ним объясняют, как приложение устроено.
PWA — не нативное приложение, перенесённое в браузер. Это веб, который с помощью progressive enhancement становится надёжнее, устанавливаемее и ближе к системе, не отказываясь от URL как способа распространения.