Прогрессивная революция: что такое PWA-приложения и почему они эффективнее Android и iOS-программ

Почему смартфоны до сих пор находятся на пике популярности, а производители не перестают идти на разного рода ухищрения ради повышения показателей продаж? Ответ прост — мобильные устройства генерируют невероятные показатели прибыли. Согласно данным Statista, к 2023 году объем генерируемой мобильными гаджетами ежегодной выручки приблизится к отметке 1 триллион долларов. На 2021 год этот показатель равняется 693 млрд долларов, а всего 3 года назад, в 2018-м, он составлял в 2 раза меньше — 365 млрд долларов.

Речь идет не о заработке компаний с продаж гаджетов, а о прибыли с показа рекламы и использования платных сервисов. Рекламные баннеры и интеграции каждый из нас видит в видеороликах на YouTube, в группах социальных сетей, в играх, а также в статьях на различных интернет-сайтах. За последние три года доход с рекламы вырос почти в 2 раза, но вот принципиально новых приложений в Google Play не появилось — откуда такой рост? Оказалось, что в последнее время набирают популярность PWA-приложения, специальным образом адаптивные веб-сайты, имитирующие приложения из Google Play и App Store. Их становится все больше, у них масса достоинств, а потому пора поподробнее о них рассказать.

Фото: synergytop.com
Фото: synergytop.com

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

Дословно это Progressive Web App — прогрессивные веб-приложения. Это технология, визуально и функционально преобразовывает интернет-сайты в аналоги утилит, скачиваемых из фирменных магазинов Google и Apple. Своего рода это гибрид, смесь нативной утилиты и веб-ресурса. Сохраняя функциональность нативного приложения и его внешний вид, такой подход позволяет отказаться от установки программ в память устройства. Для запуска веб-аналогов (PWA-приложений) необходим обычный браузер.

Как ни странно, но у истоков PWA лежит Apple, придумавшая данную разработку еще в 2007 году. Подобные веб-приложения должны были стать основой для первого iPhone и доступны одновременно в браузере Safari. Таким образом достигалась бы кроссплатформенность, когда одна и та же утилита запускалась и на смартфоне с iOS (iPhone OS изначально), и на компьютере под macOS. По этой же причине оригинальный iPhone не имел магазина приложений App Store на начальном этапе.

Тем не менее такое решение не сыграло ввиду скудного пользовательского опыта (poor user experience), а потому через год Apple отказалась от продвижения PWA и сосредоточилась на нативных утилитах и разработке App Store. Компания сместила приоритеты, а потому создание прогрессивных веб-программ застопорилось.

Фото: appstronauts.co
Фото: appstronauts.co

С новой силой к технологии вернулись только в 2015 году в связи с расширением возможностей гугловского браузера Chrome, а также благодаря повсеместному внедрению Service Worker и Web App Manifest. Именно 6 лет назад разработка и приобрела название PWA. В 2018 году прогрессивные веб-приложения стал поддерживать браузер Safari как на iOS, так и на macOS, а Microsoft стала продвигать их через Microsoft Store. Сегодня PWA могут работать на всех актуальных операционных системах в браузерах Chrome, Firefox, Safari, Microsoft Edge и Samsung Internet.

Основная задумка PWA. Преимущества и недостатки

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

  • Они кроссплатформенные — достаточно использовать указанные выше браузеры и использовать на любом устройстве, будь то даже терминал в торговом зале;
  • Отсутствие потребности в скачивании и установке обновлений — приложения обновляется удаленно, на сервере;.
  • PWA индексируются популярными поисковыми системами, что увеличивает их аудиторию;
  • Возможность работы оффлайн благодаря технологии Service Worker;
  • За счет четкого разделения frontend и backend кода, обновление и переработка приложений занимает меньше времени и ресурсов;
  • Отсутствие необходимости скачивания утилит исключительно из фирменных магазинов по типу Google Play и App Store. Так обходится запрет на «установку из неизвестных источников». Антивирусы также не «ругаются» на PWA;
  • С 2019 года PWA можно устанавливать не только из браузера Chrome, но и из магазинов приложений.

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

Вот почему:

  • Не все устройства и ОС могут раскрыть полный функционал PWA;
  • Множественные ограничения на iOS (вес кеша не более 50 Мб, отсутствие встроенных платежей и интеграции с Siri);
  • Ограниченная работа в режиме оффлайн;
  • Неполный доступ к аппаратной части устройства;
  • Увеличенный расход батареи из-за необходимости постоянного доступа в Интернет.

Еще одним серьезным упущением PWA является невозможность работы с 3D-графикой — они способны отображать только текст и картинки/видео, то есть примитивную графику.

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

Для большего понимания предлагаем посмотреть пару PWA-приложений и сравнить их дизайн/возможности с нативными утилитами.

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

PWA-версия Twitter
PWA-версия Twitter
PWA-версия Twitter

Давайте взглянем на «ВКонтакте». Отличия между утилитами лишь в том, что в версии PWA используется предыдущая версия ВК, не имеющая раздела «Клипы». В остальном функционал не урезан, зато сэкономлено свыше 500 МБ на внутреннем хранилище.

PWA-версия ВК / обычная версия ВК
PWA-версия ВК / обычная версия ВК
PWA-версия ВК / обычная версия ВК

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

Неплохо показал себя и PWA интернет-магазин La Nature, в первые месяцы увеличивший конверсию на 65% со смартфонов при росте просмотра страничек с товаром на 30%. Все благодаря тому, что это удобно и достаточно быстро — время загрузки страницы в случае с La Nature составило 0,1 секунды, что намного быстрее, чем у тяжеловесного сайта.

Как установить PWA

Некоторые утилиты доступны для скачивания из Google Play и App Store, но в основном прогрессивные утилиты устанавливаются из браузера Chrome. Для этого достаточно найти в поисковике мобильную версию сайта интересующего ресурса, открыть его, нажать в Chrome на «три точки» — «Установить приложение» — «Установить». На этом все — утилита появится на рабочем экране или в меню приложений (зависит от прошивки смартфона). Открываем и пользуемся.

Будущее за PWA

Если говорить о мессенджерах или социальных сетях, то пока у PWA мало шансов вытеснить своих старших братьев. Все же веб-программы медленнее и имеют некоторые ограничения, да и разработчики не спешат переводить всё на PWA. Например, YouTube в прогрессивной версии до сих пор не существует, хотя есть его мобильная адаптация и даже Lite-версия в Google Play.

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

Это тоже интересно: