Прогрессивные веб-приложения

Что такое прогрессивные приложения (PWA)?

Прогрессивное веб-приложение (PWA, Progressive Web App) — это веб-приложение, созданное на стандартных технологиях веба (HTML, CSS, JavaScript), которое при определённых условиях получает свойства обычного приложения: устанавливается на устройство, может работать без интернета и отправлять уведомления. Внешне и по поведению оно близко к нативному приложению, но распространяется через веб — по обычной ссылке.

Как это устроено

Основа PWA — обычный сайт, работающий по HTTPS. Два ключевых элемента превращают его в приложение:

Манифест веб-приложения (web app manifest) — небольшой файл с описанием приложения: название, иконки, цвета, адрес запуска. Именно он позволяет браузеру «установить» приложение на рабочий стол и открывать его в отдельном окне без интерфейса браузера.
Service worker — скрипт, который живёт между приложением и сетью и перехватывает запросы. Он кэширует нужные файлы и данные, поэтому приложение быстро запускается, а часть функций работает офлайн. Через него же реализуются push-уведомления и обновления.

Термин «прогрессивное» отражает принцип работы: возможности наращиваются по мере их поддержки браузером и устройством. Там, где какой-то функции нет, приложение просто откатывается к обычному поведению сайта — оно остаётся работоспособным на любом устройстве.

Что умеет PWA

Установка без магазина приложений. Браузер сам предлагает установить приложение — кнопкой на странице или пунктом в меню. После подтверждения иконка появляется на рабочем столе. Никаких App Store и Google Play; размещение в сторах остаётся возможным, но не обязательным.
Работа офлайн. Service worker сохраняет на устройстве интерфейс и ранее загруженные данные, поэтому страницы, которые пользователь уже открывал, доступны без сети.
Уведомления — только по явному согласию. Браузер отдельно спрашивает разрешение, и до него приложение не присылает ничего. Если уведомления надоели, их можно отключить одной настройкой — так же легко, как дать согласие, — не удаляя само приложение.
Автоматические обновления. Новая версия загружается при первом же визите — централизованного «обновления через магазин» не требуется.
Один код для всех платформ. Один и тот же PWA работает на Android, iOS и настольных системах; нет необходимости разрабатывать и поддерживать отдельные версии.

Ограничения, о которых стоит знать

Возможности PWA ограничены тем, что разрешают браузеры и операционные системы, и различаются между платформами. Наиболее заметные границы:

Доступ к возможностям устройства. Часть аппаратных функций (Bluetooth, NFC, датчики и др.) доступна ограниченно или не предоставляется вовсе, в отличие от нативных приложений.
Различия между платформами. Функциональность зависит от браузера и ОС. Например, iOS дольше остальных систем ограничивала PWA: поддержка push-уведомлений появилась там лишь с версии iOS 16.4, а некоторые возможности, работающие на Android, на iOS недоступны до сих пор.

Несмотря на ограничения, перечень задач, где PWA полноценно заменяет нативное приложение, широк: интернет-магазины, медиа, системы бронирования, банковские сервисы, корпоративные инструменты. Крупные компании — Twitter, Uber, Starbucks, Spotify — используют этот формат наравне с нативными приложениями.

Чем PWA отличается от обычного сайта и нативного приложения

Обычный сайт требует сети, не устанавливается на рабочий стол и не умеет отправлять уведомления. Нативное приложение требует установки из магазина, занимает больше места и нуждается в отдельной разработке под каждую платформу. PWA находится между ними: как сайт — доступно по ссылке и обновляется без участия пользователя, как приложение — установлено на устройство, работает офлайн и общается с пользователем уведомлениями.