Progressive Web Apps (PWA)

Что такое Progressive Web Apps, или PWA?

Progressive Web Apps — это технологическое соединение нативных приложений и знакомых нам веб-приложений на HTML5. PWA появились, чтобы закрыть технологический разрыв между приложениями и веб-страницами.

Google был одним из главных сторонников развития этой технологии. Чтобы лучше понять её особенности, нужно говорить о приложениях, которые должны быть надёжными, быстрыми и вовлекающими.

Какими должны быть Progressive Web Apps

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

Разумеется, мы говорим в общем. А дальше каждая модель бизнеса или сервиса подстроит свои цели под нужды собственной аудитории.

Скорость

Время — деньги, и не только для Google, но и для всех тех бизнесов, где медленная загрузка продуктов может заставить пользователя бросить потенциальную покупку.

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

У сегодняшних пользователей нет терпения: они не ждут, пока сайт загрузится полностью. 53% пользователей не станут ждать загрузки сайта дольше 3 секунд — по данным Think with Google

Надёжность

Говоря о надёжности, мы имеем в виду гарантии работы сайта. Благодаря тому, что известно как Service Workers, проблемы с сетевым соединением не должны мешать PWA загружаться.

Устанавливаемость

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

Установка ведёт себя просто как ярлык: ей не нужно место для хранения разных файлов.

Разные устройства: мобильные и десктоп

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

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

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

• ›Экономия ресурсов
• ›Не требуется установка
• ›Очень высокая скорость загрузки
• ›Push-уведомления прямо на смартфоны
• ›Работает на всех операционных системах
• ›Повышенная безопасность
• ›Меньше работы по разработке и поддержке, чем у нативного приложения.
• ›Дешевле нативного приложения.

Минусы

• ›Требуется интернет-соединение.
• ›Не все браузеры поддерживают PWA.
• ›Высокий расход батареи

Что такое Service Worker?

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

Важно знать одно: Service Workers могут работать, только если у вас есть SSL-сертификат и вы отдаёте их по https.

А теперь посмотрим на всё это на примере: сайт BMW и его PWA.

Пример PWA: BMW

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

Если зайти на сайт BMW, видно, что у них очень привлекательный дизайн с упором на визуал, но давайте выйдем за рамки разговора о дизайне и посмотрим, с каким типом сайта мы имеем дело.

На вид это «обычный» сайт, но если покопаться в коде, нас ждёт первый сюрприз. Действительно, это сайт, полностью разработанный на AMP, а не только его мобильная версия.

Но перейдём к сегодняшней теме.

Оказавшись на сайте, зайдём в панель «Настройка и управление» в Chrome.

Как вы могли заметить, открылось окно с контентом сайта BMW. Сравнивая оба варианта, видим, что они практически идентичны.

Изображение сайта в браузере (Chrome)

Изображение сайта в PWA на десктопе

Разработчикам BMW удалось сохранить идентичный визуальный вид. Когда мы соглашаемся на «установку» PWA в папку приложений Chrome или даже на рабочий стол (в зависимости от ОС; я сейчас пользуюсь MacOS), загружается ярлык на PWA.

Если нас утомила установка приложений и мы хотим удалить, достаточно зайти в окно нашей версии PWA, кликнуть справа так же, как в Chrome, и выбрать удаление.

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

Заходя на сайт с PWA, мы увидим предложение создать ярлык.

Если согласимся, увидим иконку PWA на рабочем столе телефона.

DevTools, чтобы узнать о PWA больше

На этом этапе хочу разобрать понятия и свойства такого типа приложений на примерах.

Для этого воспользуемся инструментом разработчика, который даёт Chrome (DevTools). Открываем инспектор правой кнопкой и переходим в Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Манифест — небольшой JSON-файл с базовыми аспектами оформления, который он передаёт браузеру, чтобы избежать резких изменений.

Пример манифеста (JSON)

Service Workers

Как мы объясняли раньше, теперь можно увидеть, о чём речь. Видим JS-файл, а в нём скрипты, которые он использует. Service Worker устанавливается в браузер. У нас их будет несколько — от других веб-приложений.

Одна из главных функций такого кода — гарантировать, что всегда отдаётся одна и та же версия (он управляет кэшем), даже если мы откроем другую вкладку.

Как внедрить PWA в WordPress?

Если мы разработали сайт на собственном коде, ручной работы будет немало, а вот если сайт сделан на WordPress — ситуация совсем другая. В этом случае в нашем распоряжении будет несколько плагинов, которые позволят включить технологию PWA в пару кликов. PWA-версия SEO Alive, к слову, — как раз результат работы плагина, который мы рекомендуем.

Самые популярные плагины для внедрения PWA в WordPress.

PWA в маркетинге

Тем из нас, кто работает в маркетинге, Progressive Web Apps могут помочь достичь целей, которые держит в голове любой отдел маркетинга при развитии бренда.

Лояльность и продажи

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

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

Исследование Gartner по PWA даёт ряд очень интересных цифр по Lancome и Alibaba: Lancome сообщает о росте конверсий на 17%, на 51% — сессий с мобильных устройств и на 52% — на iOS. Alibaba (группа, к которой относится Aliexpress) улучшила свой коэффициент конверсии на 76%.

Хотя мы говорили о 2 мировых гигантах, наличие на телефоне приложения, у которого время загрузки и работы не тормозит, плюс уважение к хорошему дизайну — всё это, как показано, повышает коэффициент конверсии.

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

Любая технология, облегчающая мобильную навигацию, крайне важна: мы проводим со смартфонами много часов, а доступ и к контенту, и к товарам — это в конечном счёте бизнес.

Источники

• ›Документация Google по PWA