Понятие Progressive Web Applications (PWA) на слуху уже давно. А сейчас особенно становится популярным из-за достаточного количества плюсов его использования в сфере веб-разработки. Основные из них, — это экономия бюджета, push-уведомления и работа оффлайн.
Что такое PWA
PWA (Progressive Web App) — это технология, позволяющая создавать сайты, которые могут работать как мобильные приложения и десктопные приложения. Если кратко, то это гибрид обычного сайта и мобильного приложения.
Многие известные бренды (Twitter, Telegram, Uber, Tinder, Airbnb и др.) уже используют PWA в качестве основного продукта или дополнения к мобильному приложению.
Как это работает
При первой загрузке сайта у пользователя появляется всплывающее окно с предложением добавить сайт на главный экран.
Вот так это окно выглядит на смартфоне:
А вот так на настольном компьютере или ноутбуке:
После этого у пользователя появится иконка сайта на главном экране и возможность запустить его как отдельное приложение.
Таким образом ваш сервис оказался на устройстве пользователя всего в два клика. Многие функции, которые предоставляет PWA, будут работать, даже если пользователь откажется закрепить приложение на главном экране.
После установки приложения, пользователь видит адаптивную версию вашего сервиса в отдельном окне.
Какие преимущества дает PWA вашему бизнесу?
Разработать такое приложение можно в несколько раз дешевле и быстрее, чем мобильное приложение, что отлично подходит для MVP и тестирования гипотезы вашего стартапа;
Push-уведомления (пока не работает в Safari) — возможность повысить повторные продажи и средний чек, или просто оставаться на связи с клиентом. В web-сайтах Push на момент написания статьи не реализованы;
Работа оффлайн — можно реализовать доступ к контенту без интернета. Это очень полезная функция. Зачем она нужна? Например: сохранение статьи, для того, чтобы прочитать ее в самолете или заполнение формы без интернета (в этом случае данные будут отправлены в фоновом режиме, когда интернет появится). Обычные сайты не обладают такой возможностью;
Возможность разместить приложение в Google Play Market и получить дополнительный источник трафика;
Повышение лояльности — ваш сервис всегда на виду у пользователя, в списке приложений или на главном экране;
Скорость. В отличие от мобильного приложения, PWA-приложение устанавливается моментально, так как все его компоненты уже подгружены в кэш еще при первом посещении;
Размер такого приложения намного меньше, чем размер мобильного приложения;
PWA-приложение, в отличие от мобильного, не нужно обновлять отдельно — при выкате изменений, они сразу появятся у всех пользователей.
Как сделать PWA
Настроить Service Worker. Service Worker — это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него. Из хранилищ у Service Worker’a есть доступ к Cache Storage для web ресурсов, и IndexDB для данных. В итоге, процессы приложения могут выполняться в фоне, даже если сайт-PWA не открыт;
Настроить защищенный протокол HTTPS. Чтобы сайт удовлетворял требованиям PWA, нужно, чтобы все ресурсы сайта передавались по HTTPS протоколу;
Добавить иконку для предоставления приложения на устройстве в размере 192×192 и 512×512;
Правильно настроить Веб-манифест. Web App Manifest — это JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры.
Сравнение возможностей обычного сайта, PWA и мобильного приложения
WEB-сайт
PWA
Мобильное приложение
Работает без установки
✅
✅
❌
Работает на всех устройствах
✅
✅
❌
Индексируется поисковыми системами
✅
✅
❌
Мгновенная доставка обновлений
✅
✅
❌
Небольшой размер
✅
✅
❌
Установка на главный экран устройства
✅
✅
✅
Push-уведомления
❌
✅
✅
Работа в оффлайн-режиме (без соединения с интернетом)
❌
✅
✅
Нет отвлекающих элементов управления браузера
❌
✅
✅
Возможность добавить в каталог Play Market
❌
✅
✅
Возможность добавить в каталог App Store
❌
❌
✅
Поддержка всех нативных API устройства
❌
❌
✅
Вывод
PWA — технология, которая позволяет совместить возможности обычного сайта и мобильного приложения. Внедрение этой технологии как минимум не помешает вашему сайту, но даст дополнительные возможности — такие, как работа оффлайн, Push-уведомления, установка в Google Play Market и многое другое. Разработка PWA значительно дешевле и быстрее, чем разработка мобильного приложения, но позволяет создать UX, очень похожий на работу пользователя с мобильным приложением.
