Что такое PWA (прогрессивное веб-приложение)

Количество пользователей мобильных устройств стабильно растет. Ожидается к 2021 году рост прибыли для мобильных приложений больше относительно веб-сайтов.

Чтобы удовлетворить этим требованиям, компании электронной коммерции должны предлагать интуитивно понятные
и доступные интерфейсы, которые делают покупки с телефона быстрыми и легкими или рискуют остаться позади

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

Вот здесь и приходят PWA. Прогрессивные веб приложения.

к содержанию ↑

Что такое прогрессивное веб-приложение (PWA)?

Прогрессивное веб-приложение — это веб-сайт, который выглядит и ощущается как мобильное приложение. PWA запускаются в браузере, поэтому нет необходимости загружать приложение из Google Play Store или iOS App Store.

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

Twitter — один из примеров прогрессивного веб-приложения. Идите вперед и войдите в свою учетную запись Twitter через браузер вашего смартфона. Та-да! Теперь вы используете PWA, способный выполнять уведомления в режиме реального времени, автономные уведомления и другие функции, подобные приложениям.

Еще один пример прогрессивного веб-приложения можно найти в Gmail. Опять же, войдите в свою учетную запись Gmail через браузер смартфона, и вы получите опыт, подобный приложению, который позволяет вам индивидуально выбирать электронные письма, маркировать их, перемещать между папками и т. д. Вы также увидите, что новые электронные письма попадают в ваш почтовый ящик в режиме реального времени.

к содержанию ↑

Атрибуты прогрессивного веб-приложения: Что делает PWA?

Давай минуту понастальгируем. Термин Progressive Web App был придуман в 2015 году Алексом Расселом. Вместе с Фрэнсис Берриман Рассел «перечислил атрибуты [нового] класса приложений» на основе постепенного и мощного развития современных браузеров. Вот те атрибуты, которые предусмотрены Расселом и Берриманом:

• Progressive работают с каждым пользователем, независимо от выбора браузера, потому что с самого начала созданы с прогрессивным улучшением.
• Responsive: подходит для любого форм-фактора, рабочего стола, мобильного телефона, планшета и т.д.
• Connectivity independent: усовершенствование сервиса для работы в автономном режиме или в сетях низкого качества.
• App-like: использование модели оболочки приложения для обеспечения навигации и взаимодействия в стиле приложения.
• Fresh: всегда обновляется благодаря процессу обновления сервис-воркера.
• Safe: использование с помощью транспортного уровня для предотвращения слежения и обеспечения подлинности контента.
• Discoverable: идентификация как «приложения» благодаря App Manifests и области регистрации рабочего персонала, что позволяет поисковым системам находить их.
• Re-engageable: упрощает повторное включение с помощью таких функций, как push-уведомления.
• Installable: позволяет пользователям «сохранять» приложения, которые они находят наиболее полезными на своем домашнем экране, без вмешательства магазина приложений.
• Linkable: лёгкий обмен по URL-адресу не требующий сложной установки.

к содержанию ↑

PWA против адаптивных сайтов

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

к содержанию ↑

Вы должны использовать PWA или адаптивный веб-сайт?

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

PWA против нативных приложений

Нативные приложения созданы для работы в определенной операционной системе, такой как Android или iOS. Разработчики должны использовать определенные языки, такие как Java или Swift, для создания приложений или отказаться от некоторого родного внешнего вида с помощью кросс-платформенного инструмента разработки, такого как React native. После создания приложение должно быть отправлено и проверено в Google Play или Apple store, чтобы убедиться, что оно соответствует стандартам каждой платформы. В общем, этот процесс может занять месяцы.

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

к содержанию ↑

Should you use a PWA or a native app?

Если вашему проекту требуется открытый доступ с одного URL-адреса, и у вас нет огромной команды разработчиков с кросс-платформенным знанием Android и iOS, то PWA, вероятно, является лучшим вариантом. Если вы просто хотите иметь опыт работы с нативными приложениями и иметь бюджет на разработку, то вы можете использовать нативное приложение.

TL; DR: адаптивный веб-сайт против родного приложения, против прогрессивного веб-приложения (PWA)

Фичи	Cайт	Приложение	PWA
Мобайл фриендли
Устанавливаемое
Сео индексация
Оффлайн режим
Пуш уведомления
GPS включено

к содержанию ↑

Как работает PWA?

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

1. Service worker

Работник службы — это код JavaScript, который выполняется в фоновом режиме PWA. Их основное назначение — предварительная кэширование ресурсов, поэтому веб-приложение загружается быстро и может даже иметь автономные функции. После того, как веб-сайт был посещен один раз, работник сервиса сохраняет (или кэширует) важные ресурсы, такие как файлы HTML и изображения, чтобы ему не приходилось совершать API-вызовы в бэкэнде так часто, как при следующем посещении пользователя. Однако сервисные работники могут использоваться для других задач, таких как push-уведомления и фоновые синхронизации данных.

к содержанию ↑

2. Web манифест

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

3. Transport Layer Security (TLS)

PWA должны обмениваться данными через HTTPS, установив SSL-сертификат на своем веб-сервере. Сертификат SSL создает безопасное зашифрованное соединение между внешним приложением и внутренним сервером. Эти требования используют протокол TLS для обеспечения безопасной передачи данных при взаимодействии веб-приложения с внутренними системами электронной коммерции и CMS. Это важно для обеспечения безопасности информации пользователя и для магазинов электронной коммерции, которые обрабатывают данные кредитных карт клиентов.

к содержанию ↑

Преимущества прогрессивного веб-приложения

Хотя переход на PWA, скорее всего, потребует некоторой работы по разработке, есть огромные преимущества, связанные с ускорением загрузки и преимуществами SEO, уменьшением потребностей в данных и отсутствием требований магазина приложений.

1. Быстрота

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

к содержанию ↑

2. Лучше для SEO

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

3. Уменьшает потребность в данных

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

к содержанию ↑

4. Нет необходимости для магазинов приложений

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

к содержанию ↑

5. Снижает затраты на разработку

Для разработки собственных приложений требуются совершенно иные технические стеки, в то время как в PWA используются стандартные веб-технологии, такие как HTML, CSS и JavaScript, которые хорошо известны разработчикам внешнего интерфейса. Обновление существующего веб-сайта с помощью функций PWA намного дешевле, чем разработка собственных приложений с нуля, и любые обновления, которые вам нужно сделать, выполняются мгновенно, не требуя проверки Apple или Google.

к содержанию ↑

6. Приводит к лучшему пользовательскому опыту

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

к содержанию ↑

7. Приводит к лучшему взаимодействию

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

к содержанию ↑

8. Увеличивает конверсии

Для магазинов электронной коммерции переход на PWA может значительно улучшить конверсию. Например, AliExpress увеличила коэффициент конверсии для новых пользователей на 104% с помощью своего нового PWA. Наряду с улучшенным взаимодействием, PWA могут предложить упрощенный пользовательский интерфейс и процесс оформления заказа, который эффективно продвигает пользователя вниз по воронке продаж.

к содержанию ↑

Два недостатка прогрессивных веб-приложений

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

1. Вы теряете трафик в магазине приложений

Хотя PWA может принести пользу для SEO, вы все равно теряете трафик пользователей, которые ищут в Google Play Store или iOS App Store. Как правило, это широкая аудитория, и пользователи могут задаться вопросом, почему у вас нет приложения, или могут потребовать, чтобы вы предоставили собственное приложение.

2. Устройства имеют ограничение доступа

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

к содержанию ↑

Пять способов, которыми PWA может улучшить ваш опыт покупок в электронной коммерции

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

1. Отправка push-уведомлений или оповещений

PWA могут отправлять push-уведомления после регистрации пользователей. Уведомления могут быть отправлены в любое время, даже если веб-браузер не открыт, и они выглядят так же, как уведомления родного приложения. Предприятия могут связываться с пользователями и предлагать рекламные акции с помощью push-уведомлений для повышения вовлеченности и удержания клиентов

2. Вход через соц. аккаунты

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

к содержанию ↑

3. Доступ к покупкам без интернета

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

4. Отслеживание уникальной аналитики

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

5. Упрощение обработки веб-платежей

С нативными приложениями магазины электронной коммерции ограничены в выборе поставщика платежей. Например, в iOS Apple держит монополию на платежный сервис и взимает плату за покупки в приложении. С помощью PWA вы можете воспользоваться API-интерфейсами в рамках открытого стандарта веб-платежей, который упрощает процесс оплаты для клиентов и позволяет торговцам использовать платежный сервис по своему выбору.

к содержанию ↑

Примеры использования электронной коммерции в Progressive Web Apps (PWA)

Мы объяснили преимущества PWA для электронной коммерции и несколько недостатков, с которыми вы столкнетесь. Теперь давайте посмотрим, как результаты, перенесенные в PWA, привели к трем отдельным направлениям электронной коммерции: Debenhams, AliExpress и Flipkart.

1. Debenhams: рост доходов от мобильной связи на 40%

Debenhams — давний британский ритейлер с 178 магазинами в Великобритании, Ирландии и Дании. Более 57% онлайн-трафика компании проходило через ее мобильный канал, Debenhams изо всех сил пытался сделать мобильные преобразования. Именно поэтому компания стала первым британским ритейлером, инвестировавшим в PWA, и сократила время от покупки браузера до двух-четырех раз. С тех пор новый PWA Debenhams увеличил доход от мобильной связи на 40% и увеличил общую конверсию для ритейлера на 20%.

к содержанию ↑

2. AliExpress: увеличение конверсии iOS на 84%

AliExpress — это китайский международный рынок с быстро растущей базой мобильных пользователей. Мобильное приложение компании было быстрым, но было сложно заставить пользователей установить приложение и дорого обходиться с ними. AliExpress создал новую PWA, которая предоставляла мобильные функции, делая приложение более доступным для потенциальных пользователей. В результате компания увидела 104% дополнительных новых пользователей и 84% -ное увеличение конверсии iOS.

к содержанию ↑

3. Flipkart: на 40% выше уровень повторного участия

Flipkart является крупнейшим сайтом электронной коммерции в Индии. Первоначально компания сосредоточилась исключительно на мобильном приложении, но ей было сложно обеспечить привлекательный опыт. Вместо этого компания решила выпустить Flipkart Lite, PWA, что позволило на 70% повысить конверсию для пользователей, которые устанавливают приложение, и на 40% увеличить повторное участие.

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)