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

В эпоху мобильного интернета и высоких ожиданий пользователей от онлайн-сервисов все большую популярность набирают Progressive Web Apps (PWA) - прогрессивные веб-приложения. PWA сочетают в себе лучшие качества веб-сайтов и нативных мобильных приложений, предлагая быстрый, надежный и захватывающий пользовательский опыт.

По данным Google, в среднем PWA обеспечивают на 50% больше конверсий, чем традиционные приложения или мобильные версии сайтов. При этом PWA в 3-4 раза легче по размеру, чем нативные приложения и могут сэкономить пользователям до 80% мобильного трафика благодаря встроенному кешированию.

Неудивительно, что к 2024 году, по прогнозам экспертов, доля PWA среди всех мобильных приложений может достичь 30%, а объем рынка превысит 10 млрд долларов. Уже сейчас многие лидеры e-commerce, медиа и онлайн-сервисов, такие как AliExpress, Forbes, Twitter, Tinder успешно используют PWA для охвата мобильной аудитории.

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

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

Progressive Web Apps (PWA) - это веб-приложения, использующие современные возможности браузеров и веб-платформы для обеспечения надежной, быстрой и увлекательной работы на любых устройствах. PWA опираются на ключевые принципы:

• Прогрессивность - работают для любого пользователя вне зависимости от браузера.
• Адаптивность - подстраиваются под размер экрана и форм-фактор устройства.
• Независимость от соединения - работают автономно или при нестабильном интернет-соединении.
• Актуальность - всегда содержат последнюю версию благодаря процессу обновления.
• Безопасность - обслуживаются через HTTPS для предотвращения перехвата данных.
• Обнаруживаемость - идентифицируются как "приложения" благодаря манифесту и сервис-воркеру.
• Возможность привлечения - позволяют легко сохранить иконку на домашнем экране без магазинов.
• Способность вовлечения - облегчают повторную вовлекаемость через функции пуш-уведомлений.

Другими словами, PWA привносят многие преимущества нативных приложений в веб с целью улучшить опыт пользователей:

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

При этом PWA сохраняют ключевые преимущества веба:

• Не требуют установки из магазинов приложений и совместимы с любыми устройствами.
• Мгновенно доступны по URL без скачивания, что улучшает конверсию из поисковиков и рекламы.
• Быстро обновляются у всех пользователей без ручных действий с их стороны.
• Весят в среднем в 4 раза меньше, чем нативные приложения, экономя память устройства.
• Могут быть легко обнаружены поисковыми системами и проиндексированы.

Сравним некоторые характеристики PWA с нативными приложениями и обычными сайтами:

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

Технические основы PWA

В основе функционирования PWA лежат три ключевые веб-технологии: Service Worker, Web App Manifest и протокол HTTPS.

Service Worker - это JavaScript скрипт, работающий в фоновом режиме браузера независимо от веб-страницы. Он позволяет перехватывать сетевые запросы, управлять кэшированием и реализовывать многие функции нативных приложений.

Основные задачи Service Worker:

1. Кэширование ресурсов для быстрой загрузки и доступа к контенту при медленном соединении или в офлайне. Service Worker может сохранять в кэш статические файлы (HTML, CSS, JS, изображения), API ответы и динамические страницы после первого посещения.
2. Перехват и модификация сетевых запросов. Например, Service Worker может подменять устаревшие JS и CSS файлы на актуальные версии из кэша, предотвращая загрузку лишних данных. Или возвращать из кэша сохраненные страницы при офлайн доступе.
3. Проактивная отправка пуш-уведомлений пользователям, даже когда браузер закрыт. Это позволяет информировать о важных событиях, акциях или обновлениях контента.
4. Фоновая синхронизация данных при появлении интернет-соединения. Например, если пользователь заполнил форму или сделал заказ в офлайн режиме, Service Worker может автоматически отправить эти данные на сервер, как только появится сеть.

Web App Manifest - это JSON файл, который описывает метаданные PWA для операционной системы устройства. Он позволяет указать имя приложения, иконки, цветовую схему, ориентацию экрана и другие параметры отображения PWA при установке на домашний экран.

Пример манифеста:

{
"name": "Моё приложение",
"short_name": "Моё приложение",
"description": "Лучшее PWA для вас!",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"theme_color": "#f9d423",
"background_color": "#ffffff"
}

Чтобы браузер распознал PWA и предложил установить иконку на экран, манифест нужно указать в теге link:

<link rel="manifest" href="/manifest.json">

При этом все ресурсы PWA - страницы, скрипты, стили и манифест должны передаваться по протоколу HTTPS, чтобы гарантировать безопасность и конфиденциальность данных пользователя. Service Worker может быть зарегистрирован только на защищенных соединениях.

3. Функциональные возможности PWA

Комбинация современных веб-технологий позволяет реализовать в PWA многие возможности нативных приложений:

Установка на домашний экран. Благодаря манифесту, пользователи могут добавить иконку PWA на рабочий стол смартфона или в меню «Пуск» на ПК прямо из браузера в 1-2 клика. При запуске оттуда PWA откроется в полноэкранном режиме, как обычное приложение.

Работа в офлайн режиме. Service Worker может кэшировать критически важные ресурсы при первом посещении, чтобы они были доступны без интернет-соединения. Например, PWA магазина может показывать товары и принимать заказы даже в офлайне, а потом синхронизировать данные при появлении сети.

Пуш-уведомления. Service Worker умеет получать пуш-сообщения с сервера и показывать их пользователю, даже когда PWA закрыто. Это может в разы повысить повторные посещения и конверсии. Но сначала нужно запросить разрешение на уведомления.

Индикация новых событий. Значок PWA на экране может показывать счетчик непрочитанных сообщений или уведомлений. Так пользователь всегда будет в курсе важных обновлений.

Фоновая синхронизация. Если пользователь совершил действие в PWA без интернета (например, отправил сообщение в чате), Service Worker может автоматически повторить запрос, когда сеть появится. Это создает ощущение бесшовной работы приложения.

Доступ к системным API. PWA могут использовать многие нативные возможности устройства, если пользователь даст на это разрешение:

• Геолокация - для показа карт, навигации или выбора ближайших магазинов/сервисов
• Камера - для сканирования QR/штрих-кодов, загрузки фото профиля или товаров
• Микрофон - для голосового ввода, поиска или общения
• Датчики освещения и приближения - для управления яркостью и отключения экрана
• Bluetooth - для взаимодействия с устройствами IoT, часами, колонками
• Файловая система - для скачивания контента и работы с документами
• Буфер обмена - для копирования/вставки текста и изображений
• Вибрация - для тактильной реакции на действия

Оплата внутри приложения. PWA могут интегрировать API платежных систем и сервисов, таких как Google Pay, Apple Pay, PayPal, Stripe для приема оплаты без перезагрузки страницы. Это радикально упрощает процесс покупки и повышает конверсию.

Но есть и ограничения того, что могут PWA по сравнению с нативными приложениями:

• Отсутствие доступа к некоторым системным функциям - звонки, SMS, контакты, NFC и т.д.
• Нет возможности работы в фоновом режиме, кроме отправки уведомлений
• Меньше места для хранения данных (квота PWA в среднем 50Мб против 200Мб у нативных)
• Невозможность полноценной работы в офлайне для приложений с динамическим контентом

Однако возможностей PWA в большинстве случаев хватает, чтобы закрыть основные потребности пользователей. А в 2023 году появились новые API для файлового доступа, медиа сессий, редактирования изображений и отправки SMS, что еще больше снижает разрыв между PWA и нативными приложениями.

Ключевые преимущества PWA

Благодаря прогрессивным веб-технологиям PWA приложения обеспечивают множество преимуществ как для пользователей, так и для бизнеса. Согласно исследованию Google, среднее время загрузки PWA составляет 2,75 секунды, что в 8 раз быстрее среднего нативного приложения (22 секунды). Это достигается за счет предварительного кэширования ресурсов Service Worker'ом и уменьшения размера приложения. Средний размер PWA - 300 КБ против 20 МБ у нативного приложения, что в 15 раз экономит мобильный трафик пользователей.

Благодаря интеллектуальному кэшированию Service Worker, PWA остаются доступными и функциональными даже при медленном интернете или полном его отсутствии. Исследование Gartner показало, что добавление офлайн режима увеличило конверсии PWA магазинов на 15%. PWA обеспечивают удобство использования интерфейса, сравнимое с нативными приложениями - быстрые переходы, анимации, работа в полноэкранном режиме. Это побуждает пользователей проводить больше времени и совершать целевые действия. Например, PWA Aliexpress увеличило конверсии в покупку на 104% по сравнению с мобильным сайтом. А у Lancôme конверсия в PWA на 17% выше, чем в приложении.

Возможность установки иконки на рабочий стол в один клик повышает видимость PWA - оно всегда на глазах у пользователя. В сочетании с пуш-уведомлениями это увеличивает повторные открытия приложения. Например, у eXtra Electronics иконку PWA добавили на 250% больше пользователей, чем установили приложение из Google Play.

В отличие от нативных приложений, PWA не требуют публикации и одобрения в магазинах приложений. Их легко распространять по URL ссылке в рекламе, соцсетях, e-mail рассылках и результатах поиска. При этом PWA индексируются поисковыми системами, в отличие от нативных приложений. Например, индексация PWA Nikkei привела к росту органического трафика на 2,3 раза.

Создание PWA обходится в среднем в 3 раза дешевле, чем нативного приложения, за счет использования единой веб-технологии вместо нескольких нативных платформ (Android, iOS). При этом PWA работает на всех современных устройствах и не требует постоянных обновлений в магазинах приложений. Это снижает затраты на разработку на 75% и на поддержку на 33% в сравнении с нативными приложениями.

Области применения PWA

PWA приложения универсальны и могут использоваться в самых разных сферах бизнеса, где важны удобство пользователей и производительность:

• Интернет-магазины и маркетплейсы. PWA идеально подходят для e-commerce, обеспечивая быстрый и бесшовный шоппинг на мобильных. Примеры: AliExpress, eXtra Electronics, Jumia, Lancôme, Levi's.
• Медиа и новостные порталы. PWA позволяют быстро загружать контент, сохранять его для офлайн чтения и получать пуш-уведомления о свежих новостях. Примеры: Forbes, Nikkei, The Washington Post, Telegram.
• Сервисы заказа еды и доставки. PWA отлично работают для выбора ресторанов, формирования заказа и отслеживания доставки. Примеры: Starbucks, Burger King, Domino's Pizza, FoodPanda.
• Туристические и транспортные приложения. PWA удобны для поиска и бронирования билетов, отелей, просмотра расписаний и уведомлений об изменениях. Примеры: Booking.com, Aviasales, Trenitalia, Airbnb.
• Социальные сети и мессенджеры. PWA обеспечивают быстрый доступ к лентам, сообщениям, возможность делиться контентом и получать уведомления. Примеры: Twitter, Pinterest, Instagram, TikTok.
• Стриминговые сервисы и онлайн-кинотеатры. PWA позволяют смотреть видео, слушать музыку и подкасты с минимальной буферизацией. Примеры: YouTube, Spotify, SoundCloud, Netflix.
• Банки и финтех. PWA безопасно проводят платежи, переводы, показывают баланс и транзакции даже при слабом интернете. Примеры: Monzo, Barclays, Tinkoff, Halyk Bank.

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

По данным CMS Magazine, более 65% населения Украины в возрасте 14-70 лет являются интернет-пользователями, большинство из которых используют смартфоны. При этом число установок нативных приложений в Украине за 2022 снизилось на 19%.

На этом фоне PWA выглядят перспективной альтернативой для развития мобильного присутствия украинского бизнеса и охвата аудитории. Тем более, учитывая нестабильность мобильного интернета в стране из-за проблем инфраструктуры. Многие украинские компании - Allo, Comfy, Bank Vostok, Prom.ua, SkyUp уже успешно запустили PWA версии своих сервисов наряду с нативными приложениями.

Поэтому, если ваш бизнес еще не имеет удобного мобильного решения или вы размышляете над альтернативой текущему приложению - пора серьезно присмотреться к технологии PWA. Это может открыть новые горизонты для роста вашего mobile first продукта при минимальных затратах на разработку и поддержку.

Примеры успешного использования PWA

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

AliExpress

Один из крупнейших маркетплейсов в мире AliExpress запустил PWA версию своей платформы в дополнение к сайту и нативным приложениям в 2016 году. Целью было повысить конверсию и вовлеченность пользователей из мобильного веба.

Результаты AliExpress PWA:

• Увеличение конверсии в покупку на 104%
• Рост показателя времени, проведенного на сайте, на 74%
• Повышение количества просмотренных страниц за сессию на 14%

Ключевыми факторами успеха стали почти мгновенная загрузка страниц (~1 сек), возможность покупок в один клик, пуш-уведомления об акциях и скидках, а также удобный поиск и фильтрация товаров в PWA.

Lancôme

Французский бренд косметики класса люкс Lancôme решил создать PWA, когда обнаружил, что мобильный сайт приносит в 2 раза меньше конверсий, чем десктопная версия, а нативное приложение имеет небольшую базу пользователей.

Эффект от запуска PWA Lancôme:

• Увеличение конверсии на 17% по сравнению с приложением
• Рост мобильных сессий на 51%
• Сокращение времени до интерактивности на 84%

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

Twitter

Популярная соцсеть Twitter была одной из первых, кто экспериментировал с PWA, запустив облегченную версию Twitter Lite в 2017 году для развивающихся стран с медленным интернетом.

Статистика Twitter Lite PWA:

• Увеличение количества твитов на 75%
• Рост числа просмотренных страниц на 65%
• Уменьшение отказов на 20%

"Легкий" размер PWA (600 КБ против 23.5 МБ у приложения Android), быстрая навигация и возможность персонализации интерфейса побудили пользователей проводить больше времени и генерировать больше контента в PWA.

Среди других успешных примеров PWA - Pinterest, Starbucks, Tinder, Forbes, Aviasales, Ola Cabs, Tinder, Book My Show и многие другие. В каждом кейсе внедрение PWA приводило к заметному улучшению ключевых метрик - конверсий, вовлеченности, удержания и производительности.

Будущее PWA и тренды развития

Хотя технология PWA не нова, именно сейчас она набирает популярность у бизнеса. Этому способствует прогресс веб-стандартов, растущая производительность устройств и browsers, а также новое поколение пользователей, предпочитающих мобильные и легкие интерфейсы.

Ключевые тренды, которые будут определять развитие PWA в ближайшие годы:

Расширение возможностей Web API. Ведущие технологические компании, такие как Google, Microsoft, Samsung вкладывают значительные ресурсы в разработку новых программных интерфейсов и инструментов для веба. Такие API как File System Access, Web Bluetooth, Contact Picker, Idle Detection, Screen Wake Lock и другие постепенно стирают грань между PWA и нативными приложениями.

Интеграция с экосистемами устройств. PWA приложения будут более глубоко интегрироваться с аппаратными возможностями устройств и их операционными системами. Например, взаимодействовать с "умной" домашней техникой, фитнес-браслетами, VR/AR оборудованием. Также PWA смогут лучше работать в фоне, получать доступ к файлам, хранить больше данных офлайн.

Платформы для создания и дистрибуции PWA. Многие популярные платформы электронной коммерции (Shopify, Magento, WooCommerce), системы управления контентом (WordPress, Drupal, Joomla) и конструкторы сайтов (Wix, Squarespace) уже предлагают PWA как часть своих решений "из коробки". В будущем такие PWA-платформы станут еще более распространенными и доступными для массового использования.

Конвергенция с другими технологиями. PWA будут все больше использоваться в связке с другими современными технологиями. Например, искусственным интеллектом и машинным обучением (для персонализации интерфейса и контента), блокчейном (для безопасной идентификации пользователей и транзакций), биометрией (для входа по лицу или отпечатку) и т.д.

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

Согласно прогнозу Grand View Research, мировой рынок PWA вырастет до $10.44 миллиарда к 2027 году, показывая среднегодовые темпы роста 31.9%. При этом количество смартфонов в мире превысит 7.5 миллиардов.

Это значит, что все больше бизнесов будут видеть в PWA эффективный способ достичь и удержать мобильную аудиторию. А развитие возможностей веб-приложений сделает из все более функциональными и удобными.

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