Что такое PWA-приложения: примеры использования, плюсы и минусы
PWA (progressive web apps) — это современный подход к созданию веб-приложений, который объединяет собой функционал сайтов и мобильных решений. Обеспечивая положительный пользовательский опыт, PWA предлагают быструю загрузку страниц, возможность работы не только онлайн, но и офлайн, причём со всех популярных операционных систем сразу.
Но на этом преимущества не заканчиваются. «Вишенка на торте» — в том, что разработка таких приложений сравнительно недорогая.
В статье рассмотрим PWA в бизнес-парадигме. Разберём преимущества и недостатки. Расскажем, для каких целей они будут полезны вам, а для каких — категорически не подойдут.
В NLABTEAM мы успешно завершили более 50 проектов по разработке программного обеспечения, в том числе обычных и прогрессивных веб-приложений. Делимся экспертизой с вами.
Что нужно знать о PWA-приложениях в первую очередь
Progressive Web App (PWA) — это интерактивное веб-приложение, которое использует браузерные технологии для предоставления пользовательского опыта. PWA может работать в браузере, а также быть установленным на мобильное устройство, где оно будет выглядеть и вести себя как нативное приложение.
Главное преимущество PWA — в универсальности. Такое приложение работает на любом устройстве с браузером. Если же мы говорим об обычных веб- и мобильных приложениях, то их, как правило, пишут под конкретные платформы по отдельности. Здесь же код пишется один раз и адаптируется под нужные вам операционные системы.
Концепция Progressive Web Apps была введена инженером Google Алексом Расселом и дизайнером Фрэнсисом Бэрром в 2015 году. Эта технология стала удобнее и мощнее благодаря развитию веб-стандартов и с тех пор набирает популярность.
Сегодня PWA-приложения создали для себя такие компании, как Google, Twitter, Ebay, Spotify, Uber и AliBaba. В России технология PWA особенно полезна банкам, так как помогает заменить мобильные продукты и обойти санкции. PWA-приложения уже используют Сбер, Альфа-банк, Т-банк и ВТБ.
| Разбираемся, что такое PWA | |
| В чём суть | PWA — веб-приложение, которое ведёт себя как нативное на разных устройствах, в том числе мобильных. |
| Какие языки использует | HTML, CSS, JavaScript. |
| Где запускается | На любом устройстве с браузером. |
| Примеры внедрения | Google Maps, Twitter Lite, Alibaba. |
Примеры популярных PWA-приложений
1. Sberbank Online
Сбер выпустил PWA-приложение, чтобы обойти ущемляющую политику сторов: в апреле 2022 года приложение банка удалили из App Store и Google Play. Веб-версия по функционалу ничем не уступает мобильным: инженеры реализовали даже вход по биометрии.
2. X Lite
Яркий пример PWA-приложения. Прогрессивная версия популярной социальной сети занимает всего 3MB на диске. Благодаря этому быстро грузится даже при низкой скорости соединения в условиях 2G и 3G сетей.
При этом интерфейс остаётся отзывчивым и плавно работает даже на стареньких смартфонах. Приложение нацелено на развивающиеся рынки и места с плохим покрытием сети.
3. Alibaba
Маркетологи Alibaba хотели повысить возвращаемость, направляю часть мобильного веб-трафика в приложения. Гипотеза заключалась в том, что с помощью Push-уведомлений и других конверсионных инструментов получится сократить процент пользователей, совершивших одну покупку.
Для этого сперва создали нативные приложения, но подход себя не оправдал: необходимость покинуть сайт и перейти в стор создавала на пути пользователя лишнее препятствие.
Тогда разработчики переключили внимание на PWA. Создали прогрессивную версию и добавили на сайт баннер «Установить на домашний экран». Пользователи взаимодействуют с ним гораздо охотнее. В результате конверсия выросла на 76%.
4. Spotify
Кейс Spotify подсвечивает одну из главных особенностей PWA-приложений: отсутствие привязки к сторам. К разработке PWA компанию подтолкнуло несогласие с высокой комиссией AppStore — Apple забирает себе 30% от продаж, и Spotify это не устраивало.
Инженеры стримингового сервиса реализовали в PWA полноценный пользовательский опыт, который ничем не уступал мобильным версиям, а веб-версию даже обыгрывал.
Какой результат получился? После релиза количество ПК-пользователей выросло на 45%.
Чем PWA лучше обычного приложения с точки зрения бизнеса
PWA часто используют, чтобы быстро и сравнительно недорого сделать полноценную версию приложения, универсального для любых операционных систем, в том числе iOS и Android. И, конечно, чтобы перестать зависеть от сторов. Но это далеко не все преимущества:
#1. PWA-приложения дешевле мобильных
Как отметили выше, в случае PWA-приложений, код пишется один раз и используется для 6 операционных систем (ОС). Для всех платформ код адаптируется, однако это намного дешевле, чем писать приложение с нуля под каждую ОС. Отсюда — экономия в среднем до 60 % — это выгодно, если вам нужно решение для двух и более ОС.
Отсюда вытекает следующее преимущество.
#2. Работают на большинстве устройств
Приложение бесшовно запустится на любой платформе, в том числе Windows, iOS, Android, MacOS, Linux. Более того, они могут работать на любом устройстве с поддержкой браузера: а это и ПК, и десктопы, и другие современные девайсы.
#3. PWA-приложение разработать проще, чем любое другое
Так получается, если сравнивать с нативным приложением. Нативные — и в меньшей степени кроссплатформенные приложения — разрабатывают в специальных SDK и используют особые языки программирования.
| iOS приложения разрабатываются на: | Swift/Objective-C |
| Android приложения разрабатываются на: | Kotlin/Java |
Если разработчик вдоль и поперёк не знает этот узкопрофильный инструментарий — создать качественное нативное приложение не получится.
PWA таких требований не накладывает, так как использует более широко известные языки: за логику в прогрессивных приложениях отвечает JavaScript, а за отрисовку контента HTML и CSS. Так, найти хорошего разработчика под проект становится проще, выбор богаче, при этом стоимость работы ниже, если сравнивать с другими (особенно теми, кто занимается мобильной разработкой).
#4. Работают как онлайн, так и офлайн
Даже если у пользователя пропадёт связь, сеанс не завершится и продолжится в офлайн-режиме. Это значит, что пользователь не увидит ни ошибки и “бегущего тираннозавра” в хроме, ни индикатора загрузки. А вы — ни на секунду не потеряете его внимание.
Вместо этого пользователь продолжит свою работу в приложении: положит в корзину нужные товары, заполнит форму заявки на банковский продукт. И, если сеть была недоступна не очень долго, не «почувствует» его.
Стабильная работа PWA-приложения уменьшает отток клиентов, обеспечивая хороший UX.
Показательный пример — кейс Trivago: маркетологи компании посчитали, что из 3 % пользователей, чьи сеансы прервало отсутствие интернета, только 67 % возобновили работу, когда их устройство снова поймало сигнал. С PWA с вами останутся все 100 %.
#5. Независимы от платформ-издателей
PWA-приложения можно развернуть на любых серверах, включая отечественные облачные сервисы или вашу собственную инфраструктуру, что даёт полный контроль над размещением продукта и выбором мер обеспечения безопасности данных
В контексте развёртывания, PWA-приложения выгодно отличаются от мобильных, которые распространяются через сторы и находятся в риске удаления издателем.
Почему это так важно? Как мы уже отмечали, Apple и Google массово удаляют российские мобильные приложения их с 2022 года из-за санкций. Под «гребёнку» уже попали приложения Сбера, Абсолюта, Почта Банка и Хоум Банка.
#6. Индексируется поисковыми системами
Это удобно для ретейлеров, банков и других сфер. Покупателям и клиентам будет легко найти ваш сервис в Сети, такое приложение выглядит для них как отдельный полноценный ресурс. Это преимущество можно использовать, чтобы привлечь больше пользователей из поиска, ведь помимо основного сайта у вас появится +1 канал рекламы, связи с аудиторией.
Недостатки PWA-приложений
Недостатки технологии вытекают оттуда же, откуда и преимущества — их накладывает универсальность, свойственная любой кроссплатформе.
- Доступ к аппаратным функциям устройства (камере, микрофону, GPS-трекеру) не всегда возможен. PWA-приложения не имеют доступа к некоторым низкоуровневым API из-за ограничений со стороны браузеров. Причём на устройствах Apple таких ограничений больше: недоступны Bluetooth, Touch ID и Push-уведомления в Safari. В нативных мобильных приложениях таких сложностей нет.
- Не все знают, что такое PWA-приложение и как его установить. Технология всё ещё набирает популярность, и не все пользователи сталкивались с этим типом приложения. Однако всегда можно дать пошаговые инструкции по установке с иллюстрациями или записать процесс на видео, тогда у пользователей не возникнет сложностей при установке.
- Они не такие производительные, как нативные. Из-за этого сложные интерфейсы с множеством анимаций могут «тормозить». Почему нативные приложения отличаются высокой производительностью и в чём ещё их преимущества перед кроссплатформами (а PWA — это в первую очередь кроссплатформенная технология), мы писали в статье.
Кому подойдёт PWA приложение, а кому — нет
Особенности PWA-приложений затачивают их под ряд применений, и в них у PWA почти нет конкурентов. При этом в силу ограничений технологии, некоторым проектам этот подход, наоборот, принесёт больше вреда, чем пользы.
Давайте разберёмся, какой вариант ближе вашей компании, и нужно ли вам PWA.
О PWA-приложении стоит задуматься, если:
- Есть риск, что сторы удалят ваше текущее мобильное приложение. (Сейчас это особенно актуально для банковского и финансового сектора в РФ.)
- У вас уже есть веб-приложение, и вы хотите сделать его удобным для мобильных устройств. Кстати, рекомендуем к прочтению интереснейший кейс о проекте, для которого мы выполнили именно такую адаптацию.
- Требуется быстро и дёшево создать новое мобильное приложение с возможностью адаптации под веб, чтобы протестировать гипотезу.
- Вам нужна облегчённая версия приложений для устаревших устройств.
PWA не подойдёт, если:
- В вашем приложении важный функционал завязан на аппаратных API. Сюда входят Bluetooth, NFC, Touch ID и другие технологии.
- У вас есть серьёзные требования к производительности при большом объёме обрабатываемых данных.
- Планируете реализовать уникальный, непростой интерфейс и использовать тяжёлую графику.
- Вам необходима глубокая интеграция с другими сервисами и приложениями на устройстве (в таком случае проверяйте, возможно ли её реализовать с PWA, до того как примете решение о разработке).
Как происходит разработка PWA приложений
В сущности, работа над основной кодовой базой PWA почти идентична веб-разработке (мы описывали процесс разработки веб-приложений в материале), поэтому здесь подсветим основные отличия.
Технические особенности PWA, которые влияют на процесс разработки
PWA-приложения мало отличаются от веб-приложений с точки зрения архитектурных подходов к разработке. Но в них обязательно включают 2 дополнительных компонента:
- ServiceWorker.
- Web App Manifest.
Именно эти компоненты обеспечивают функциональность PWA.
Service Worker — это скрипт, который браузер запускает в фоновом режиме, отдельно от веб-страницы. Он действует как прокси-сервер, располагаясь между веб-приложением, браузером и сетью. Service Worker управляет кэшем приложения, перехватывает и модифицирует сетевые запросы и использует Push API для получения уведомлений. Именно этот скрипт обеспечивает функциональность PWA-приложений, близкую к нативным.
Web App Manifest — это конфигурационный JSON-файл, который содержит метаданные приложения: название, иконку, цвет темы и т.д. Манифест связывается с главной HTML-страницей проекта через тег <link> с атрибутом rel=’manifest’. Браузер, прочтя этот файл, знает, как установить PWA-приложение на домашний экран, отобразить его иконку и как отображать приложение (в полноэкранном режиме или нет).
Проще говоря:
| Service Worker | Расширяет функциональность. |
| Web App Manifest | Управляет отображением. |
В остальном PWA-приложение строится поверх любой веб-технологии.
Это удобно для коммерческих проектов. Ведь для разработки можно использовать React, Vue.js, Angular, Svelte или любой другой фреймворк: выбор диктует только то, какой стек лучше подходит проекту, а не архитектурные ограничения.
Этапы разработки PWA-приложений: отличия от процесса создания другого ПО
При разработке PWA-приложений мы учитываем особенности этой технологии на всех этапах (таких же, как и для стандартного веб-приложения), включая проектирование архитектуры, написание кода и тестирование.
Однако некоторые этапы, связанные с подключением функциональности PWA, выполняются ближе к финальным стадиям проекта, когда основная часть кода уже написана: проработана бизнес-логика, а дизайн перенесён в код и адаптирован для мобильных устройств.
Вот как происходит подключение функциональности PWA:
Этап 1: Подготовка
Чтобы отобразить приложение на домашнем экране смартфона, вам понадобятся иконки в разных разрешениях и описание. Сперва готовим их.
Этап 2: Web Manifest
Затем информация о приложении заносится в Web Manifest. Этот JSON-file содержит метаданные приложения и диктует устройству, как отображать приложение — во весь экран или в отдельном окне.
Этап 3: Service Worker
Файл Service Worker регистрируется в корневом каталоге проекта. Именно здесь будет располагаться логика кэширования, работы в офлайн-режиме, отправки Push-уведомлений и других фич, которые нельзя встроить в веб-приложении «из коробки».
Например, здесь можно задать, что пользователь увидит в приложении, если откроет его без сети или в каких случаях он будет получать уведомления.
Разработка service worker — самый сложный и длительный этап.
Как установка такого приложения выглядит для пользователя
Пользователь воспринимает PWA-приложение как обычное нативное. Различается только способ его установки на устройство.
- Сначала пользователь открывает сайт PWA в браузере.
- Затем нажимает «поделиться».
- Выбирает опцию «На экран ‘домой’».
На смартфонах приложение помещается на домашний экран, а на десктопах появляется в меню приложений или на рабочем столе, в зависимости от выбора пользователя. Установить такое приложение на мобильный телефон не сложнее, чем скачать со стора, однако пользователю очень поможет короткая инструкция от поставщика.
Например, так выглядят некоторые шаги в инструкции установки PWA от Т-банка:
Подведём итоги
- PWA-приложения универсальны и работают на любом устройстве с браузером. Их дешевле и проще создавать, но подходят они не всем.
- К технологии стоит присмотреться, когда есть риск, что издатель удалит текущее приложение из сторов, требуется быстро и дешево создать мобильную версию продукта или когда нужен облегченный вариант приложения для старых устройств.
- Из преимуществ особенно выделятся независимость от платформ-издателей — для российских компаний вопрос автономности стоит остро, особенно в условиях санкций.
- Не подходят PWA, если критически важна производительность или когда коренная функциональность приложения требует доступа к низкоуровневым интерфейсам, таким как Bluetooth, NFC и другие аппаратные функции, которые могут быть недоступны или ограничены в PWA-приложениях.
- PWA внедрили Twitter, Spotify и Google Maps. В России технологию активно используют банки для создания автономных приложений, которые не зависят от платформ-издателей и могут быть использованы в условиях санкций. Прогрессивные приложения уже выпустили Сбер, Т-банк и ВТБ.
Хотите воспользоваться всеми преимуществами PWA и получить приложение, работающее почти на любых устройствах, включая мобильные? Напишите нам!
В NLABTEAM мы разрабатываем программное обеспечение любой сложности более 20 лет. Фокусируемся на проектах для среднего и крупного бизнеса, создаём и поддерживаем решения, которые работают годами и обеспечивают нашим клиентам независимость от сторонних вендоров.
Проведём оценку вашего проекта, подскажем, подходит ли PWA под ваши задачи, и составим подробное коммерческое приложение с декомпозицией всех работ.
Наш e-mail: [email protected]
