Что такое PWA и зачем он нужен бизнесу?
Опубликовано: 11 Сен 2020
Вернуться в блог
Понятие 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, очень похожий на работу пользователя с мобильным приложением.
