Что такое Progressive Web Apps и в чем их преимущества

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

Преимущества PWA

1. Первое преимущество PWA перед приложениями заключается в том, что не нужно заходить в Google Play или AppStore, чтобы что-либо загрузить. Требуется только подключение к интернету и браузер.
2. Второе преимущество PWA заключается в том, что любой пользователь может установить ярлык сайта на главном экране своего устройства, как будто это мобильное приложение. Более того, для сайта не нужны дополнительные 100 Мб места, из-за чего придется удалять фотографии или другие приложения. Крайне важно, в рамках стратегии развертывания PWA, решить, когда удобнее всего показать пользователю, что он может создать ярлык на главном экране смартфона.
3. С помощью Progressive Web App пользователь может продолжать пользоваться сайтом, даже если интернет пропал. Профит к лояльности! 
4. Страницы PWA могут весить менее 1 Мб. Это дает большое преимущество миру mobile-first (в котором мы, собственно, и живем).
5. Одной из стратегий для увеличения повторных посещений является отправка push-уведомлений. Пуши напоминают пользователю, что на сайте появился новый контент. К счастью, Progressive Web Apps позволяют отправлять уведомления на главный экран смартфона по типу обычных приложений (увы, работает это пока только на Android). 

Итак, резюмируем вышесказанное: лояльность пользователей сайтов PWA достигается с помощью push-уведомлений, возможности установки ярлыка, автономной работы и высокой скорости загрузки страниц.

Возьмем гипотетический пример. База отдыха в Ленинградской области. Чтобы посетители смогли легко найти базу, на сайте добавлена подробная информация о том, как добраться до места. Но часто люди забывают записать координаты или проезжают мимо указателей. Заблудшие путники, конечно, захотят позвонить на ресепшен или посмотреть на сайте, куда ехать, но в области слабый интернет, а местами его и вовсе нет. Так что поиск места отдыха может стать стрессовой ситуацией. Решить эту проблему может PWA-сайт, так как иконка уже установлена на телефоне и главная страница откроется без интернета. 

Примеры популярных PWA

• The Washington Post. После запуска PWA на 12% выросло количество посещений, до 80 миллисекунд сократилось время загрузки страницы.
• Walmart. С добавлением этой функции интернет-магазин увеличил посещаемость на 28%. 
• Book My Show. Крупнейшая в Индии компания по продаже билетов с 50 миллионами посетителей в месяц. Внедрение PWA увеличило конверсию на 80%. 

Как работают прогрессивные веб-приложения?

Progressive Web Apps состоят из двух основных частей:

1. оболочки, которая отображает структуру страницы (сетку);
2. контента, который может варьироваться между различными страницами приложения.

В зависимости от технологии, используемой для разработки страницы, содержимое может быть отправлено с сервера в формате HTML или с помощью сценария JSON. Однако при использовании JSON нужно быть осторожным, так как этот сценарий может негативно повлиять на индексирование страниц в поисковых системах. 

Файл манифеста

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

Этот файл содержит следующие данные:

• Name: имя приложения.
• Description: описание приложения.
• Icons: иконка приложения с различными разрешениями для мобильных устройств.
• Start url: url запуска. Когда пользователь жмет на иконку, должна открываться главная страница. 
• Display: настройки отображения (standalone, fullscreen, minimal-ui и другие).
• Orientation: веб-приложение может использоваться в портретном или в ландшафтном режиме.
• Theme_color: цвет, который будет использоваться в верхней панели приложения.
• Background_color: цвет для экрана перед полной загрузкой приложения.

Service Worker

Другим важным файлом PWA является Service Worker – скрипт, который работает в фоновом режиме и позволяют сайту работать автономно, загружая содержимое и генерируя push-уведомления.

Вы можете проверить, использует ли сайт скрипты service-worker.js с помощью браузера:

1. Откройте любую веб-страницу.
2. Щелкните правой кнопкой мыши и выберите «Inspect Element» (посмотреть код элемента). 
3. Перейдите на вкладку «Application» и «Service Workers». Вот пример:

Также вы можете открыть раздел «Cache Storage» – в нем можно увидеть файлы, которые были загружены и кэшированы скриптами Service Worker.

Заключение

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