Что из себя представляет Progressive Web Apps?
На самом деле, это гораздо проще, чем кажется на первый взгляд. У вас есть сайт, где представлены все ваши услуги и товары. Очевидно, для того, чтобы они продавались, недостаточно хорошего оформления и приятных цен. Ваш клиент должен иметь легкий доступ ко всему, что вы предлагаете. Progressive Web Apps (сокращенно PWA), является как раз тем элементом, который позволит беспроблемно и легко взаимодействовать с вашим сайтом. Ваши клиенты могут легко устанавливать ваш сайт на любой гаджет, получать уведомления, реагировать на них и все это возможно даже при отсутствии интернет-соединения. Стоит обратить внимание на тот факт, что популяризацией этой технологии занимается корпорация Google.
Философия PWA
Самое сложное в понимании сути этого явления является то, что нет его практически точного толкования. Но есть идея, сильная и достаточно точно оформленная. Суть ее заключается в самом названии технологии — Progressive. Именно благодаря этой прогрессивности мы имеем возможность без одновременно глобального ремоделинга и рефакторинга постепенно исследовать технологии PWA и успешно внедрять актуальные результаты исследований в свои проекты. Устарелость для данного явления является полным антонимом.
Развитие идеи характеризуется не быстрым, но постепенным и прогрессирующим темпом и мы имеем все основания, чтобы считать, что, чем дальше, тем тотальнее и глобальнее будет шагать PWA-формат в мировой паутине.
История явления
Google анонсировал PWA еще в 2015 году. Больше всего, по-видимому, этот формат заинтересовал следующими преимуществами — простотой разработки и мгновенным взаимодействием с пользователями.
И уже через год, на конференции разработчиков Google I/O The Washington Post корпорацией был продемонстрирован свой самый первый гибридный сайт-приложение.
В то же время этой идеей заинтересовалась и корпорация Microsoft, которая сразу задалась вопросом каким образом рациональнее воспользоваться актуальностью идеи и добавить PWA в Windows Store.
От Google мы услышали достаточно большое количество идей, каждая из которых по своему поспособствует развитию прогрессивных приложений. Особенно необходимо отметить тот момент, что с самого начала поисковые системы показали готовность уделять больше внимания PWA. И именно решение воспользоваться прогрессивным приложением может быть определяющим в SEO-продвижении вашего будущего продукта.
Уменьшение количества пользователей приложений
С 2015-го по 2016-й год загрузки мобильных приложений в США снизились более чем на 20%, что наглядно демонстрирует устарелость данной технологии, в то же время, как спрос на Progressive Web Apps только растет.
Уменьшение количества загрузок
Comscore дает нам статистику, согласно которой большинство пользователей смартфонов совсем не загружают себе мобильные приложения в течение месяцев и только часть загружает от 1 до 3 приложений за целый месяц, что является неутешительным показателем для разработчиков мобильных приложений.
Только Progressive Web Apps способны изменить ситуацию к лучшему
- Нет разницы — установлено прогрессивное приложение на смартфон вашего клиента, или нет — оно продолжает работать в любое время и в любом месте.
- Пользователь не тратит ни единого лишнего момента своей драгоценной жизни, все необходимые данные уже были загружены в кэш браузера при посещении сайта, таким образом, приложение устанавливается мгновенно. В то время как обычное мобильное приложение вынуждает потратить время на его поиск, загрузку и установку, что, в целом, может отталкивать потенциальных клиентов.
- Прогрессивные приложения имеют гораздо более меньший размер, что тоже привлекает внимание будущих клиентов, поскольку едва ли не каждый из нас имел проблемы с загрузкой приложений из-за недостатка памяти. Такая оптимизация ресурсов устройства возможна только путем эффективного использования возможностей браузера.
- Для использования PWA вообще не имеет значения, с какой платформы работает устройство, в то время, как пользователи мобильных приложений должны учитывать их платформу, а бизнесменам вообще такая ситуация не выгодна, поскольку необходимо создавать несколько приложений, приспособленных к разным платформам.
- Даже без предварительной загрузки прогрессивного приложения такие функции, как всплывающие сообщения, работа в автономном режиме и все другие, доступные загружаемым приложениям, будут работать.
- Предложение на установление PWA появляется только при условии абсолютного соответствия веб-приложения четким критериям и в случае, если пользователь не впервые посещает ваш сайт. Таким образом, приложение выглядит привлекательно, а его предложение не вызывает чувство раздражения.
- Любому пользователю легче воспользоваться ссылкой из следующих источников: социальные сети, веб-страницы (во время серфинга мы просматриваем их большое количество) или попросту из того, что предлагают нам поисковые ресурсы. Для вашей стороны выбор именно PWA должен быть предпочтительным, поскольку не каждое новое мобильное приложение способно быть конкурентоспособным на таких ресурсах, как IOS App Store или Google Play Store.
- Пользователи App Store вынуждены платить 30% от объема продаж. Если вы только начали заниматься своим делом, то такие расходы могут значительно тормозить развитие вашего бизнеса и заметно сокращать вашу прибыль.
В чем же заключается «прогрессивность» данного формата?
Стоит только один раз загрузить приложение на одно из устройств и пользователь будет иметь доступ к нему при любых условиях. На данный момент, только формат PWA имеет данные преимущества.
Предлагаю ознакомиться с результатами тематических исследований компаний, уже воспользовавшихся PWA, опубликованных корпорацией Google.
AliExpress увеличил процентное соотношение положительных результатов для новых пользователей на 104%.
United eXtra Electronics повторно заинтересовал в 4 раза больше пользователей, чем до привлечения к своей системе PWA технологии, а те пользователи, что отреагировали на Push-уведомления, на 100% увеличили уровень продаж.
5miles увеличил коэффициент конверсии на целых 30%, в то время как количество отказов уменьшилось в два раза.
Konga уменьшила количество необходимой для загрузки информации на целых 92%.
Отличия PWA от нативных приложений
Недостатки прогрессивных приложений
Наверное, самый большой и единственный недостаток — новизна PWA, из-за чего они все еще представлены на рынке в недостаточном количестве.
Архитектура Progressive Web Apps
.svg)
СкоростьПлавный и отзывчивый UI сопровождает максимально быстрый обмен сетевыми данными.
ПривлекательностьРаботая с приложением, пользователь не испытывает никаких недостатков в виде медлительности или отсутствия оптимизованности, благодаря чему у него формируется положительная ассоциация с предлагаемым продуктом.
НадежностьНет разницы, где, что и как делает пользователь, он всегда будет иметь доступ к приложению. В нашем случае качество интернет-соединения не играет никаких препятствий.
Разработчику предлагаются инструменты (Service Worker, Push Notifications, Web App Manifest) для достижения конкретной цели — сделать сайт или приложение максимально удобным в использовании, и только от разработчика зависит, воспользуется ли он всеми предложенными возможностями и насколько готовый продукт будет соответствовать ожиданиям. Именно это и выделяет корпорация Google, как главное отличие PWA от нативных приложений.
То есть, мы с вами имеем определение PWA. Progressive Web Apps представляют собой сетевые приложения, которые, в процессе создания наполнялись готовым набором определенных технологий, комбинировались друг с другом для создания того или иного продукта. Продукт должен соответствовать всем целевым показателям, только в таком случае прогрессивное приложение можно считать готовым к использованию.
Progressive Web Applications
Технологии
- Service Worker
- Web App manifest
- HTTPS
- App shell
- Push Notifications
Целевые показатели
- Надежность
- Быстрота
- Привлекательность
Технологии Progressive Web Apps
Service Worker
Так же, как и в любом другом явлении, в PWA есть свой центр, сердце, вокруг которого работает вся система. В нашем случае это — Service Worked. Все запросы проходят именно через этот элемент, что постоянно проксирует между фронтендом и бэкендом, они же, в свою очередь, находятся в браузере. Именно такое деление на два независимых слоя делает не только возможным, а и максимально простым переход от обычного сетевого сайта в прогрессивное приложение.
Он имеет доступ к важнейшим элементам системы, позволяющей получить больше свободы в реализации амбициозных бизнес-проектов. Если рассматривать подробнее, то для сетевых ресурсов Service Worker использует Cache Storage, a IndexDB используется для данных. То есть, уже на этом этапе процесс получения и предоставления информации является легким, доступным и оптимизированным.
Из возможностей мы обладаем способностью принять запрос от браузера, проверить состояние сети, воспользоваться данными хранилища, обработать их и отправить определенный результат обратно в браузер, который может принять эту информацию как ту, что вернулась с сервера, или нет, в зависимости от желания разработчика. PWA представляет из себя чистый Javascript и, в принципе, не зависит от фреймворков. Progressive Web Apps легко пишутся от руки, что позволяет контролировать логику работы вашего приложения. Но специалисты Google все равно советуют разработчикам пользоваться библиотечными генераторами кода.
HTTPS
Важно, чтобы для передачи ресурсов сайта использовался HTTPS протокол. Это не является проблемой, поскольку SSL сертификат легко получить бесплатно, а в некоторых случаях эту опцию выполняют хостеры, что чрезвычайно удобно. Главное — не давать на странице ссылки на незащищенные ресурсы, если вы хотите, чтобы браузер отображал PWA.
Application Shell
Данный инструмент ответственен за внешний вид сайта/приложения. Для лучшего понимания сути его работы нужно, для начала, определить для себя разницу между динамической и статической информацией. Статическую информацию обновляют только при необходимости, она предоставляет самый стабильность и неизменность (“изменность” имеет место быть только в случае обновления контактной информации, новых событий в истории компании и т. д.). Это то, что остается в случае, когда отсутствуют весь контент и динамическая информация. Последняя же может быть прайс-листом товаров и услуг, перечнем иллюстраций, сопровождающих описание ваших продуктов, то, есть, грубо говоря, начинка, самое вкусное на вашем сайте. Так как же работает этот инструмент? Он сохраняет статическую информацию в клиенте пользователя, в то время, как, динамическая информация догружается в случае запуска клиентом приложения. Это позволяет в любой ситуации сохранять приложению презентабельный вид. Для потенциального клиента всегда важно, чтобы элементы сайта не съезжали в разные стороны, что, очевидно, будет препятствием в адекватном и, хотя бы, минимально эффективном восприятии предоставленной информации. Замечательный вариант — когда загрузка динамической информации и вообще контента реализована сразу через ajax вызовы — в таком случае переход в PWA не встретит никаких преград.
Если вы рассматриваете свой PWA через призму восприятия нативным приложением, то можете поставить знак равенства между App Shell и оболочкой нативной программы.
Web App manifest
Говоря примитивно, этот инструмент позволяет добавить ваш PWA в виде отдельного приложения прямо на домашний экран устройства. Подробнее — он является JSON файлом, решающим, как назвать приложение, выбор иконки и некоторые другие элементы.
Push Notifications
Почти 90% всех сетевых страниц, использующих PWA, соблазнились именно этим инструментом.
На данный момент это самая популярная технология. Во время серфинга интернета вы могли неоднократно наталкиваться на сайты, которые предлагают вам получать самые свежие новости. Иногда такая назойливость выглядит как спам, поэтому лучше предлагать подписку не в первый, и, возможно, не во второй раз. Начиная с третьего, когда очевидно, что пользователь не просто так заглядывает на страницу.
Progressive Web App на сегодняшний день
PWA — это, пока что, недооцененное явление, простая в создании и использовании технология, с которой должны быть знакомы разработчики всех сайтов. Особенно радует, что специалисты из Google очевидно заинтересованы в этой идее, активно ее продвигают, а, также, пишут уникальные в своей компетентности и информативности статьи. Особенно ценными их советы есть для тех, кто уже некоторое время работает в данной сфере.
Стоит напомнить, что самые популярные браузеры поддерживают прогрессивные приложения еще с весны прошлого года, поэтому, пользуйтесь преимуществами Progressive Web Apps и пусть ваш бизнес почувствует эффективность данной технологии!