PWA-приложения (PWA apps) — относительно новый тренд фронтенд-разработки. Он набирает популярность с 2018 года. Свое PWA есть у AliExpress, Twitter, Forbes, Tinder, Starbucks, Uber. В статье расскажем о преимуществах и недостатках технологии и о том, кому и зачем нужны PWA.
Что такое PWA
PWA apps расшифровывается как progressive web apps, то есть прогрессивные веб-приложения. Это промежуточный вариант между мобильными приложениями и сайтами в браузере.
PWA-сайт разрабатывается по определенной методологии. Благодаря этому его можно загрузить на устройство как приложение: с ярлыком на главном экране, возможностью слать пуши и частично работать офлайн. При этом открывается PWA в браузере, как и все сайты. Получается одновременно и сайт, и приложение, которыми можно управлять через одну и ту же CMS.
Как работает PWA
PWA apps создают на базе технологий HTML и CSS и языка программирования JavaScript. Нужны четыре ключевых элемента:
- Между фронтендом и бэкендом располагается прокси-слой Service Worker. Это файл JavaScript, который подключают в HTML-коде страницы. Он находится в браузере, через него проходят браузерные запросы. У него есть доступ к IndexDB для данных и к Cache Storage для web-ресурсов.
- Ресурсы сайта передают по HTTPS. Если на сайте есть ссылки на незащищенные ресурсы, не все браузеры корректно отображают контент.
- Application Shell — шаблон графического интерфейса. Он хранится на клиенте и загружается при запуске. Динамическая информация подгружается потом из сети.
- WebApp-манифест — JSON-файл, который отвечает за внешний вид продукта до запуска. Задает название, делает иконку похожей на нативное приложение.
- Недорогая и быстрая разработка. Для создания нативного мобильного приложения нужны две команды разработки: под iOS и под Android. С PWA справится одна команда. А если обычный сайт уже есть, то перенести его в формат PWA можно автоматически — с помощью специальных конструкторов. Для простого проекта понадобится всего день.
- Кросс-платформенность. Запускать PWA можно на любой операционной системе и в любом браузере, но с некоторыми ограничениями.
- Малый вес. В памяти устройства приложение progressive web может занимать всего 1—2 Мб. Верхняя планка — 50 Мб. Нативные приложения обычно весят от 100 Мб.
- Простая установка. Ссылку для загрузки можно разместить на сайте компании, прислать в смс, мессенджере или создать QR-код — это повышает конверсию в новых пользователей. Персональная ссылка будет работать, даже если сторонние площадки временно заблокируют отдельных разработчиков или пользователей. Пользователь может добавить иконку приложения на домашний экран мобильного устройства, но это по желанию.
- Отсутствие привязки к магазинам. PWA не обязательно выкладывать в Google Play и App Store — разработчикам не надо адаптировать продукты под их требования и договариваться о размещении. Тем не менее технически это возможно, если создать специальную программную обертку.
- Высокая производительность, почти неотличимая от нативных приложений. Копии страниц хранятся в кеше браузера и грузятся без задержек.
- Доступ к части функций офлайн. Например, можно добавить музыкальные треки в избранное и слушать их без подключения к интернету.
- Оптимизация управления контентом. Обновлять контент сайта и созданного на его основе PWA можно через CMS сайта. Это экономит время администратора.
- Отсутствие ручных обновлений. Свежие версии запускаются автоматически, как только пользователь открывает приложение.
- Простой ретаргетинг. PWA apps умеют присылать push-уведомления. Это стимулирует к покупке пользователей, которые уже интересовались продуктами компании, но еще не стали клиентами.
- Видимость для поисковых систем. Google, Bing, Яндекс и прочие поисковики индексируют PWA так же, как сайты.
- Технология находится в разработке. Ей нужно время для совершенствования.
- Аккумулятор устройства садится быстрее, чем от нативных приложений. Причина — использование языка программирования JavaScript.
- PWA apps обычно не выкладывают в магазины. Мы уже писали об этом в плюсах, но это одновременно и минус, потому что App Store и Google Play дают большой приток аудитории: часть людей ищет официальные приложения в них, а не на сайте компании. К тому же магазины проверяют приложения на наличие рисков, а загрузка с сайта не дает гарантий безопасности. Это отсеивает часть пользователей.
- Функции PWA ограничены. Например, в отличие от мобильных приложений они не могут получить доступ к календарю или контактам. Поэтому технология не подойдет для разработки инструментов тайм-менеджмента, управления задачами и проектами.
- У PWA для мобильных устройств Apple есть дополнительные ограничения. На iOS технология progressive web несовместима с Bluetooth и Touch ID. Она не позволяет отправлять уведомления в Safari, но в других браузерах этого изъяна нет. Эти недостатки вряд ли исчезнут. У Apple своя академия разработчиков. Цель корпорации — поддерживать прошедшие отбор таланты, а не давать им распыляться на чужие технологии.
Какому бизнесу подойдут PWA apps
Такие приложения подойдут бизнесам из сферы e-commerce, онлайн-медиа, сервисам бронирования, обучающим курсам, ресторанам и кафе, банкам и организациям, которые предоставляют финансовые или страховые услуги.
Также эта технология пригодится компаниям из других сфер, которые:
- Ищут клиентов и общаются с ними в интернете — тут важна высокая скорость загрузки: если человек слишком долго видит пустой экран, он может потерять терпение и уйти к конкуренту.
- Соревнуются со множеством других компаний в поисковой выдаче — PWA индексируются поисковиками, а мобильные приложения нет.
- Создают сервисы для пользователей, которые часто не имеют доступа к интернету или находятся в роуминге: например, для рыбаков, путешественников. Потребление интернет-трафика по технологии progressive web минимальное, часть функций может быть доступна офлайн.
- Хотели бы сэкономить на первоначальном запуске. Стоимость разработки PWA сравнима с сайтом и обычно меньше, чем у нативных приложений.
- Пытаются повысить средний чек и количество повторных продаж. В PWA это удобно делать с помощью ретаргетинга и push-уведомлений.
- Хотят расширить аудиторию. Автономный просмотр, ярлыки на главном экране и быстрая загрузка контента — большие преимущества для онлайн-медиа.
- Планируют разработку приложения, полностью дублирующего функции сайта.
- Должны обеспечивать максимальную безопасность передачи информации. HTTPS обеспечивает конфиденциальность данных при их передаче. Это критичное требование для финансовых, банковских и страховых услуг.
Как топовые бренды улучшили показатели с помощью progressive web:
- У AliExpress на 74% выросло время пользовательского сеанса во всех браузерах. Конверсия в iOS увеличилась на 82%. Платформа привлекла на 104% больше новых пользователей во всех браузерах.
- У Uber благодаря технологии progressive число вызовов машин с настольных ПК достигло 30% от всех клиентов.
- У Pinterest доход от рекламы вырос на 44%. Пользователи стали проводить на платформе на 40% больше времени по сравнению со старым мобильным веб-интерфейсом. Показатель основных взаимодействий благодаря progressive app увеличился на 60%.
Для примеров выбраны всем знакомые компании. Однако не только крупные бизнесы выигрывают от progressive web.
Какому бизнесу не подойдет технология
В PWA apps данные обновляются с небольшой задержкой. Это некритично для торговли, образовательных курсов или чтения статей. Но через такое приложение не получится заниматься трейдингом или делать ставки на спорт, где на счету каждая миллисекунда.
Итоги
Приложение progressive web — промежуточный вариант между мобильным приложением и сайтом. Его создают на базе технологий HTML и CSS и языка программирования JavaScript.
Главные плюсы технологии: быстрая и дешевая разработка, кросс-платформенность, высокая производительность, частичная работа офлайн, возможность рассылать пуши, дешевый ретаргетинг и видимость для поисковых систем.
Основные минусы: отсутствие возможности скачать из App Store или Google Play, быстрая разрядка батареи и ограниченный набор функций, особенно для iOS.
Progressive web подходят компаниям, которые ищут новых клиентов в интернете и оперативно общаются с ними онлайн. Они не подойдут бизнесу, которому важно обновление данных с точностью до миллисекунды.
Telegram
WhatsApp
+7 499 321-59-32
contact@orbitsoft.com