Термин 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 является для электронной коммерции, где производительность сайта и улучшение поведенческих факторов являются краеугольными для бизнеса.
