PWA

Термин появился в 2015 году: так инженер Google Алекс Рассел и дизайнер Фрэнсис Берримэн назвали сайты, которые используют новые возможности браузеров, чтобы вести себя как установленные программы. Слово «прогрессивное» отсылает к принципу прогрессивного улучшения: в старом браузере это обычный сайт, а в современном — приложение с дополнительными возможностями.

Для бизнеса привлекательность PWA в том, что не нужно разрабатывать отдельные приложения под Android и iOS и проходить модерацию в магазинах. Обновление выкладывается на сервер и сразу доходит до всех пользователей.

Три обязательные части

• HTTPS — без защищённого соединения ключевые возможности не работают (исключение — локальная разработка).
• Манифест — JSON-файл с названием, иконками, цветами и режимом отображения.
• Сервис-воркер — скрипт, который работает в фоне отдельно от страницы, перехватывает запросы и отвечает из кеша. Это особый вид воркера, на нём держатся работа без сети и push-уведомления.

Пример манифеста

{
  "name": "Склад инструментов — заказы",
  "short_name": "Заказы",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#1d4ed8",
  "icons": [
    { "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Файл подключают в шапке тегом <link rel="manifest" href="/manifest.webmanifest">, а сервис-воркер регистрируют одной строкой: navigator.serviceWorker.register('/sw.js'). Режим standalone открывает приложение в отдельном окне без адресной строки.

Когда PWA оправдан

Хорошо подходит для того, чем пользуются регулярно: личный кабинет клиента, приложение для курьеров и менеджеров, каталог для торговых представителей, которые бывают вне зоны сети. Для разового визита на сайт компании установка не нужна, а вот быстрая загрузка и кеширование статики полезны всем.

Ограничения тоже есть. На iOS установка делается вручную через меню «Поделиться», а push-уведомления работают только у установленных на домашний экран приложений. Доступ к части функций устройства у веб-приложений уже, чем у нативных. И главная ловушка — кеш сервис-воркера: при неаккуратной настройке пользователи неделями видят старую версию сайта. Стратегию обновления продумывают заранее. Если нужно оценить, подойдёт ли PWA под задачу, это обычно решается на этапе разработки веб-приложения.