Связаться с нами
Что такое PWA и зачем он нужен бизнесу?
Изображение

Что такое PWA и зачем он нужен бизнесу?

Опубликовано: 11 Сен 2020
Вернуться в блог

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

Что такое PWA

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

Многие известные бренды (Twitter, Telegram, Uber, Tinder, Airbnb и др.) уже используют PWA в качестве основного продукта или дополнения к мобильному приложению.

Как это работает

При первой загрузке сайта у пользователя появляется всплывающее окно с предложением добавить сайт на главный экран.

Вот так это окно выглядит на смартфоне:

 

А вот так на настольном компьютере или ноутбуке:

 

 

 

После этого у пользователя появится иконка сайта на главном экране и возможность запустить его как отдельное приложение.

 

                

Таким образом ваш сервис оказался на устройстве пользователя всего в два клика. Многие функции, которые предоставляет PWA, будут работать, даже если пользователь откажется закрепить приложение на главном экране.

После установки приложения, пользователь видит адаптивную версию вашего сервиса в отдельном окне.

 

Какие преимущества дает PWA вашему бизнесу?

  1. Разработать такое приложение можно в несколько раз дешевле и быстрее, чем мобильное приложение, что отлично подходит для MVP и тестирования гипотезы вашего стартапа;
  2. Push-уведомления (пока не работает в Safari) возможность повысить повторные продажи и средний чек, или просто оставаться на связи с клиентом. В web-сайтах Push на момент написания статьи не реализованы;
  3. Работа оффлайн можно реализовать доступ к контенту без интернета. Это очень полезная функция. Зачем она нужна? Например: сохранение статьи, для того, чтобы прочитать ее в самолете или заполнение формы без интернета (в этом случае данные будут отправлены в фоновом режиме, когда интернет появится). Обычные сайты не обладают такой возможностью;
  4. Возможность разместить приложение в Google Play Market и получить дополнительный источник трафика;
  5. Повышение лояльности ваш сервис всегда на виду у пользователя, в списке приложений или на главном экране;
  6. Скорость. В отличие от мобильного приложения, PWA-приложение устанавливается моментально, так как все его компоненты уже подгружены в кэш еще при первом посещении;
  7. Размер такого приложения намного меньше, чем размер мобильного приложения;
  8. PWA-приложение, в отличие от мобильного, не нужно обновлять отдельно при выкате изменений, они сразу появятся у всех пользователей.

Как сделать PWA

  1. Настроить Service Worker. Service Worker это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него. Из хранилищ у Service Worker’a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. В итоге, процессы приложения могут выполняться в фоне, даже если сайт-PWA не открыт;
  2. Настроить защищенный протокол HTTPS. Чтобы сайт удовлетворял требованиям PWA, нужно, чтобы все ресурсы сайта передавались по HTTPS протоколу;
  3. Добавить иконку для предоставления приложения на устройстве в размере 192×192 и 512×512;
  4. Правильно настроить Веб-манифест. Web App Manifest это JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры.

Сравнение возможностей обычного сайта, PWA и мобильного приложения

WEB-сайт PWA Мобильное приложение
Работает без установки
Работает на всех устройствах
Индексируется поисковыми системами
Мгновенная доставка обновлений
Небольшой размер
Установка на главный экран устройства
Push-уведомления
Работа в оффлайн-режиме (без соединения с интернетом)
Нет отвлекающих элементов управления браузера
Возможность добавить в каталог Play Market
Возможность добавить в каталог App Store
Поддержка всех нативных API устройства

 

Вывод

PWA технология, которая позволяет совместить возможности обычного сайта и мобильного приложения. Внедрение этой технологии как минимум не помешает вашему сайту, но даст дополнительные возможности такие, как работа оффлайн, Push-уведомления, установка в Google Play Market и многое другое. Разработка PWA значительно дешевле и быстрее, чем разработка мобильного приложения, но позволяет создать UX, очень похожий на работу пользователя с мобильным приложением.