Что такое PWA?

для чего нужны прогрессивные веб-приложения

2022-12-31 I Shar

время чтения 2 мин.

Прогрессивное веб-приложение (Progressive Web App, PWA) - это ресурс, который можно назвать гибридом сайта и приложения, он использует современные веб-технологии для предоставления пользователям интерфейса и функционала, подобного мобильным приложениям. Для PWA существуют определенные требования, такие приложения размещаются на веб-сервере, они доступны по URL и индексируются поисковыми системами.

Требования

Чтобы называться PWA, приложение должно быть:

Прогрессивным (Progressive): быть доступным для всех пользователей независимо от выбранного браузера. В основе верстки таких приложений лежит принцип прогрессивного улучшения (progressive enhancement),
Адаптивным (Responsive): работать независимо от того, какое устройство выбрано: смартфон, планшет, ноутбук, настольный компьюетр или что-то из будущего,
Независимым (Connectivity independent): service worker позволяет такому приложению работать в режиме оффлайн и при низком качестве соединения,
Возобновляемым (Re-engageable): прогрессивное веб-приложение доступно через иконку на рабочем столе устройства, его установка не требует наличия плей маркета. При необходимости такое приложение может отправлять пуш-уведомления с напоминаниями о изменениях и обновлениях пользователю устройства.
Надежным (Reliable): установленное PWA запускается мгновенно, независимо от качества связи и ее наличия.

Service worker для PWA написан на JavaScript, он, в определенной степени, подобен клиентскому прокси-серверу: управляет кэшем приложения и определяет варианты реагирования на запросы. Предварительное кэширование ресурсов позволяет приложению функционировать и при отсутствии сетевого подключения, обеспечивает корректное взаимодействие с пользователем.

Зачем это нужно

Высококачественно PWA имеет ряд преимуществ, позволяющих повысить лояльность пользователей, увеличить их количество, и, как итог, добиться увеличения конверсии.

Как и мобильное приложение, PWA размещается на рабочем столе устройства пользователя: если все требования для прогрессивных веб-приложений выполнены, Google Chrome предлагает разместить иконку PWA на экране.
Повышение конверсии: появление возможности улучшения взаимодействия с пользователем приводит к росту конверсии.
Надежное функционирование, независимо от состояния сети: server worker значительно уменьшает трафик как при первичной загрузке контента, так и в ходе его обновления.
Рост вовлеченности: использование PWA увеличивает вовлеченность пользователей веб-ресурса приблизительно в четыре раза.

Как повысить качество

Незаменимым помощником в работе над улучшением качества прогрессивных веб-приложений, несомненно, стал Lighthouse - приложение с открытым исходным кодом, которое позволяет провести аудит производительности, доступности и других параметров PWA. Кроме того, Lighthouse можно запустить непосредственно из меню Chrome DevTools, как из консоли, так и в качестве Node-модуля.