Progressive Web Apps. Что это и какие возможности дает бизнесу

Представьте ситуацию: вам нужно разработать приложение, которое будет удобно владельцам смартфонов на iOS и Android, доступно на большинстве устройств и при этом не выйти за рамки ограниченного бюджета. Возможное решение — разработать PWA приложение. Эту технологию впервые анонсировал Google в 2015 году, и с тех пор она продолжает совершенствоваться и интересовать инвесторов и разработчиков. Такие бренды как Twitter, Washington Post, Instagram, Pinterest, Starbucks, Aviasales и другие бренды используют приложения на базе PWA в качестве основного продукта или в дополнение к мобильному приложению.

Почему компании переходят на новые технологии и обращаются к экспертам по разработке PWA? Стоит ли вам обратить внимание на технологию PWA для вашего бизнеса? Давайте выясним.

Что такое PWA приложение

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

Как обычный сайт, Progressive Web Apps доступны по URL-адресам и индексируются в поисковиках. Как мобильные приложения, они отправляют пользователям push-уведомления с новостями и предложениями. При этом такие приложения работают на всех известных браузерах и платформах, на любых гаджетах и ПК, онлайн и офлайн.

Обычно PWA разрабатываются с использованием веб-технологий HTML, CSS, JavaScript и JS-сред, таких как Angular или Vue.

Когда используются PWA приложения

Присмотритесь к разработке прогрессивного веб-приложения в следующих случаях:

• Когда нужно мобильное приложение для максимально широкой аудитории, но разработка, поддержка, модернизация двух нативных платформ iOS и Android слишком дорога.
• Контент на сайте вашей компании постоянно обновляется. Меняются цены, постоянно проходят аукционы, есть биржевые сводки, новости и т.п.
• К сайту прикручен чат или платформа комментариев. И пользователям важно получать уведомления о новых сообщениях.
• Юзерам удобно сначала извлекать информацию, а потом загружать её в автономном режиме, по аналогии с новостными приложениями или блогом, который публикует несколько статей в день.

Что касается сфер бизнеса, то в первую очередь к PWA стоит присмотреться электронной коммерции, поскольку такие приложения позволяют:

• Повысить производительность сайта. Высокая скорость загрузки приложения снижает показатель отказов (долю пользователей, покидающих сайт до его загрузки). Для мобильных пользователей каждая секунда на счету, и успешная борьба за внимание клиентов имеет решающее значение. Быстрая загрузка приложения помогают увеличить конверсию, что позволяет повысить прибыль интернет-магазина.
• Обеспечить опыт пользования нативным приложением. Поскольку страницу не нужно загружать полностью, можно менять только некоторые блоки на странице, анимировать изменения. Это приближает PWA-сайты к опыту пользования нативным приложением.

Плюсы и минусы PWA

Как любая другая технология, PWA не является серебряной пулей и имеет ряд преимуществ и недостатков, которые стоит иметь в виду.

Преимущества

• Сокращение расходов на разработку

PWA работает на всех платформах и устройствах, что избавляет от необходимости создавать версии продукта под каждую операционную систему. 

• Взаимодействие с целевой аудиторией

Прогрессивные веб-приложения помогают бизнесу охватить аудиторию на различных каналах коммуникации с минимальными вложениями.

• Низкий процент отказов

Для загрузки обычного мобильного приложения пользователю нужно пройти 4-6 шагов, и на каждом из них отваливается до 20% аудитории. Тогда как установка PWA предлагается пользователю при повторном заходе на сайт. Основные компоненты приложения уже загружены заранее, во время первого использования приложения. Это существенно ускоряет инсталляцию и снижает количество отказов.

• Гибкость

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

• Производительность

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

• Лёгкость

PWA занимают гораздо меньше места по сравнению с нативными приложениями. Например, внедрив технологию PWA на свой веб-сайт, Pinterest сократила размер своего приложения с 9,6 Мбайт для Android и 56 Мбайт для iOS до 150 Кбайт.

• Доступ к функциям устройства

Как мы уже говорили ранее, PWA могут получить доступ к таким возможностям устройства, как камера, Bluetooth или местоположение GPS. Для владельцев сайтов электронной коммерции может быть полезно, чтобы PWA могли отправлять push-уведомления.

• Отсутствие ограничений сторов

PWA не подконтрольны магазинам приложений и обязаны соответствовать их требованиям в отличие от мобильных версий приложений.

• Хорошо для SEO

Быстрая загрузка играет большую роль в позиции веб-сайта в мобильной поисковой системе Google. PWA индексируется Google и другими поисковыми системами, хотя работает очень похоже на собственное приложение. Это абсолютный плюс для SEO.

Недостатки PWA 

PWA — отличная альтернатива нативным приложениям, однако эти приложения также имеют и недостатки.

• Отсутствие трафика из App Store и Google Play

Большое количество пользователей привыкли искать и скачивать приложения из магазинов приложений. Поэтому при отсутствии нативного приложения трафик из App Store и Google Play упускается.

• Ограниченная поддержка функций устройства 

Некоторые функции мобильного устройства недоступны с использованием текущих возможностей веб-браузера. Особенно это касается поддержки функций PWA iOS, таких как Face ID, Touch ID, ARKit, Bluetooth и информации о заряде батареи. Следовательно, совместимость PWA на iOS может быть ограниченной и глючной.

• Более высокое использование батареи 

PWA, написанные на JavaScript, расходуют больше заряда батареи, чем приложения, написанные на нативных языках таких как Kotlin или Swift.

Примеры PWA приложений

Пример успешного применения PWA — Forbes. Их веб-страница содержит большой объём контента, но сайт загружается очень быстро: за 0,8 секунды. И как обычное приложение, отправляет пользователям push-уведомления. Также Forbes создал Fluid. Это формат рекламы для Progressive Web Apps, который предназначен для быстрой загрузки на мобильные телефоны.

Как заявляют Forbes, благодаря внедрению PWA число сессий на одного пользователя увеличилось на 43%, а просматриваемость рекламы — на 20%.

Ещё один пример PWA — сайт косметического бренда Lancôme. Аналитики компании изучили движение трафика на сайте и пришли к неутешительному выводу: если с десктопа конверсия составила 38%, то со смартфонов заказ оформляли лишь 15% пользователей. Самым логичным выходом казалась разработка мобильного приложения для повышения продаж. Но владельцы Lancôme отклонили этот вариант и правильно сделали.

Вместо этого Lancôme решили создать Progressive Web App, которое не нужно загружать в сторе и которое доступно аудитории с любых девайсов. Решение оказалось эффективным: конверсия с мобильных устройств увеличилась на 17%, средняя продолжительность сеанса выросла в 2 раза, на 15% снизились отказы.

Ещё один кейс успешного использования PWA — AliExpress. Компания искала способ предоставить всем своим веб-пользователям преимущества своего приложения, такие как производительность и возможность использования режима офлайн и повторно привлекать пользователей. 

После внедрения прогрессивного веб-приложения AliExpress увеличил коэффициент конверсии для новых пользователей на 104%. Пользователи стали посещать в два раза больше страниц за сеанс, а время, затрачиваемое на сеанс, увеличилось в среднем на 74% во всех браузерах.

У нас тоже есть опыт разработки PWA приложений. Мы разработали телемедицинское приложение Primu.online, которое помогает взаимодействовать врачам и пациентам. Врачи с помощью приложения ведут онлайн-запись и базу пациентов, сохраняют истории болезней в медкарте и проводят видеоконсультации. Пациенты могут записываться на дистанционную консультацию, просматривать заметки врача и связываться с ним в чате или по видео.

Заключение

Прогрессивные веб приложения сочетают наиболее эффективные возможности мобильных и веб-приложений. Благодаря PWA значительно улучшается взаимодействие с пользователями, а также повышается уровень лояльности и удовлетворённость. Если вы рассматриваете разработку PWA приложения, свяжитесь с нашими экспертами. Мы поможем принять вам правильное решение.