Craftum — конструктор сайтов
Создайте сайт с помощью профессиональных шаблонов или придумайте дизайн с нуля

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

3 комментария
Что такое PWA

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: цвет для экрана перед полной загрузкой приложения.

Манифест JSON PWA

Service Worker

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

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

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

PWA примеры

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

Заключение

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

Комментарии

Спасибо за интересную и информативную статью!
Рустам +9
19 авг в 2020
Действительно. Коротко и понятно, спасибо!
Retrogas 0
07 мая в 14:38
Очень скептично относился к явлению веб-приложений как замены нативным до поры до времени. Потом посмотрел на то, как выглядит нынешний React Native (взгляните на тот же Discord) и современные фреймворки типа Svelte и SolidJS. Шустро работают. Некоторые проекты по скорости и удобству не отличаются от нативных вообще. Но вот чисто в браузере это все еще работает средне. Понятное дело, что в перспективе браузеры будут куда мощнее и такие приложения тоже, но пока если и нужен универсальный код, то лучше в виде приложения.
С помощью соцсетей
У меня нет аккаунта Зарегистрироваться
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
С помощью соцсетей
У меня уже есть аккаунт Войти
Нажимая кнопку «Зарегистрироваться», я даю согласие на обработку своих персональных данных, указанных в форме регистрации.
Инструкции по восстановлению пароля высланы на Ваш адрес электронной почты.
Пожалуйста, укажите email вашего аккаунта
Ваш баланс 10 ТК
1 ТК = 1 ₽
О том, как заработать и потратить Таймкарму, читайте в этой статье
Чтобы потратить Таймкарму, зарегистрируйтесь на нашем сайте