I Shar

I Shar

мир глазами веб-разработчика

Что такое PWA?

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

I Shar

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

Photo by Tom Chen on Unsplash

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

Требования

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

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

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

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

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

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

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

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

Запуск Lighthouse в Chrome DevTools

Lighthouse встроен в панель аудита ChromeDevTools:

  1. установите Google Chrome для настольных устройств,
  2. перейдите на страницу ресурса, аудит которого нужно провести,
  3. откройте Chrome DevTools,
  4. перейдите на вкладку Audit
  5. запустите аудит Run Audits
  6. через некоторое время отчет будет готов (обычно - 60-90 секунд)

Спасибо за внимание.

    • dev
    • pwa

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.