Что такое PWA и что это дает бизнесу

Термин PWA (Progressive Web Applications) придумали дизайнер Фрэнсис Берримэн (Frances Berriman) и инженер Google Chrome Алекс Рассел (Alex Russell) в 2015 году. Технология привлекла внимание, так как обещала несложную реализацию и практически моментальный контакт с пользователем. Всего через три года, сайты, использующие технологию PWA, стали поддерживаться всеми основными браузерами и в рамках идеологии mobile first становиться все более популярными практически во всех областях от новостных порталов до проектов электронной коммерции.

— The Washington Post - увеличение производительности на 88%;

— Aliexpress - увеличение времени на сайте на 74%;

— Twitter - сокращение нагрузки и на инфраструктуру на 70%;

— Net-a-Porter - улучшение SEO индексации;

— Lancome - увеличение конверсии на 17%;

— Alibaba - увеличение конверсии на 76%;

— AliExpress - увеличение времени на сайте на 74%;

— Forbes - увеличение длительности сессии на 40%;

Обозначить четкие критерии, которые жестко описывают что является сайтом PWA, а что нет, как минимум, затруднительно. Это скорее путь постоянных улучшений обычного сайта, пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому, что где-то внутри него бьется горячее сердце service worker'a.

Архитектура PWA

PWA как гибрид сайта и приложения стал возможен благодаря растущим возможностям кэша, браузеров и push-разработок и создан для достижения заданных целевых показателей:

Надежность (Reliable) — контент отображается вне зависимости от статуса и качества сетевого соединения.

Быстрота (Fast) — обмен данными по сети происходит практически мгновенно, UI плавный и отзывчивый.

Привлекательность (Engaging) — создает комфортный, вовлекающим в дальнейшую коммуникацию опыт взаимодействия с сайтом.

Другими словами, разработчику предлагаются инструменты (Service Worker, Push Notifications и др.) и указываются цели (сайт/приложение должен быть быстрым в загрузке, работать на слабом коннекте, не «лагать», работать офлайн при необходимости). Насколько далеко продвинется по этому пути разработчик - зависит только от него.

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

Основные инструменты PWA:

Service Worker

Сердце PWA — Service Worker. Это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере и через который проходят все запросы. Данное разделение на два независимых слоя позволяет сделать переход обычного веб сайта в PWA максимально простым.

Из хранилищ у Service Worker'a есть доступ к Cache Storage для web ресурсов, и IndexedDB для данных. Но, самое главное, полная свобода в организации бизнес логики.

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

PWA не зависит ни от каких фреймворков. Service Worker представляет собой чистый javascript файл, подключаемый в html коде страницы. В нем определяется логика работы с приходящими из фронтэнда запросами и другая функциональность.

HTTPS

PWA требует, чтобы все ресурсы сайта передавались по HTTPS протоколу. Ссылки на незащищенные ресурсы запрещены и некоторые браузеры просто не будут отображать сайт в случае наличия таковых. Как следствие картинки необходимо пересохранять или к себе, или на сервис с доступом по HTTPS, а не использовать ссылки на них.

Application Shell

App shell — это скелет графического интерфейса со статическим контентом. App shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell позволяет привлекательно представить базовую информацию на странице.

Web App manifest

JSON файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и др.) и некоторые другие параметры и установить PWA на домашний экран как отдельное приложение.

Push Notifications

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

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

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

1. Повышение конверсии и увеличение времени пребывания пользователей на сайте;

2. PWA относительно легки во внедрении и позволяют запустить кроссплатформенный проект в электронной коммерции за 3-6 месяцев;

3. Progressive Web Apps индексируются и улучшают SEO-показатели, что повышает органический трафик: в Google сайт будет занимать значительно более высокие позиции, если подключена технология PWA;

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

5. Сайты, созданные по стандарту PWA, работают при слабом или вовсе отсутствующем сигнале – это значит, потенциальные конверсии не будут потеряны: пользователь может положить товары в корзину, просматривая сайт без подключения к Интернету, а оформить заказ в тот момент, когда появится доступ к Сети.

6. Сохраняется возможность полностью контролировать customer journey за счет интеграции data layer во фронтальную часть PWA.

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