Прогрессивные веб-приложения (PWA): основы, преимущества, особенности, мифы

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

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

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

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

Что такого крутого в прогрессивных веб-приложениях?

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

Автономная совместимость. Одна из важнейших функций, предлагаемых PWA, заключается в том, что он может работать, когда пользователи находятся в автономном режиме или сталкиваются с проблемами подключения. Это обеспечивает лучшее взаимодействие с пользователем. Как? Что ж, когда пользователь может использовать приложение в автономном режиме, он / она может продолжать просматривать или выполнять свои задачи без перерывов. Это значительно снижает процент отказов. Фактически вы можете контролировать, что показывать пользователям, когда они не в сети.

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

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

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

Прогрессивный по своей природе. Как объяснялось ранее в примере выше, PWA постепенно расширяют функциональность. Это зависит от возможностей вашего устройства.

Простое обновление и 100% безопасность. Автоматические обновления означают, что пользователям не нужно проходить долгий и утомительный процесс обновления. Кроме того, из-за использования HTTPS злоумышленники не смогут получить доступ к контенту или внести несанкционированные изменения. Данные доставляются по защищенным каналам.

Обнаруживаемость. Прогрессивные веб-приложения можно найти как в Интернете, так и в магазинах приложений.

Простая интеграция с аналитикой. PWA можно интегрировать с такими инструментами, как Google Analytics, чтобы понимать поведение сайта и пользователей. Отслеживание событий позволит вам узнать поведение просмотра, установки и т. Д.

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

Обработка платежей. Благодаря API в открытых стандартах веб-платежей вы можете интегрировать платежи по своему выбору, предоставляя клиентам более широкий выбор. Еще одно преимущество заключается в том, что вы можете избавиться от непомерной комиссии в 30%, которую необходимо отдать Google и Apple. (Примечание: Google решила снизить комиссию с 30% до 15% в марте 2021 года, установив пороговое значение в 1 миллион долларов. Как только вы перешагнете это значение, вступят в силу 30%). Имейте на сайте свою биллинговую систему и никаких комиссий!

Размер - PWA обычно имеют размер менее 1 МБ, что намного меньше, чем то, что вы найдете в магазинах приложений. Например, пользователи Twitter Lite получают выгоду от экономии потребления данных; размер PWA по сети составляет всего 600 КБ против 23,5 МБ загруженных данных, необходимых для установки собственного приложения для Android.

Технический стек для прогрессивных веб-приложений

Развенчание распространенных мифов о PWA

Миф №1 - PWA нужно создавать с нуля

Факт. Существующие веб-сайты могут быть преобразованы в PWA в зависимости от растущих потребностей любого бизнеса. Как? Добавьте Service Worker ( файл JavaScript, обеспечивающий автономную работу вашего веб-сайта) и файл manifest.json на свой веб-сайт. Это будет работать как прокси-сервер между Интернетом и браузером. Он будет перехватывать сетевые запросы и обрабатывать ответы пользователей. Несмотря на то, что ваши пользователи находятся в автономном режиме, он будет отправлять запросы на веб-сайт, который реагирует на них, используя кешированные ответы.

Из-за файла manifest.json записываются начальный URL-адрес, значки приложений и ориентация экрана. Все это превратит ваш сайт в PWA.

Миф № 2 - PWA опустошат ваш карман

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

Миф № 3 - PWA предназначены только для малого бизнеса

Факт. Крупные компании, такие как Twitter, Google, Starbucks, AliExpress и другие подобные бренды, используют PWA для развития своего бизнеса.

Миф №4 - PWA нельзя запускать в магазинах приложений

Факт. Доступ к PWA можно получить как через Интернет, так и через магазины приложений. Twitter’s PWA доступен в магазине Google Play столько же, сколько и в Интернете.

Миф №5. Поскольку PWA не являются собственными приложениями, у них нет доступа к аппаратным функциям

Факт - PWA могут легко получить доступ к аппаратным функциям. Подробности читайте здесь -

Миф № 6 - PWA предназначены только для мобильных устройств

Факт - PWA может работать на любом устройстве, которое может предложить вам поддерживающий браузер.

Миф № 7 - PWA можно создавать только для определенных предприятий.

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

Миф № 8 - Пользователи приложения, как правило, остаются более лояльными и предлагают более высокий LTV

Факт. Согласно этой замечательной книге, PWA обычно весят менее 1 МБ, что намного меньше среднего размера нативного приложения. А разработка с использованием Интернета упрощает поддержку большого количества экранов разных размеров и возможностей устройств.

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

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

Успешный интернет-магазин модной одежды ABOUT YOU развернул Progressive Web App и предложил установку из браузера в дополнение к собственному приложению, доступному в Play. Они обнаружили, что пользователи, установившие PWA, «производят продажи в пять раз выше, чем средний мобильный пользователь» и что они «ведут себя так же, как пользователи нашего собственного приложения».

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

О других мифах читайте в этой удивительной статье Дэвида Руссе.

Когда следует использовать прогрессивные веб-приложения?

1. Если у вашей компании нет собственного приложения или предлагает плохой / устаревший опыт, начните изучать маршрут PWA. Кроме того, если ваше собственное приложение слишком сильно зависит от веб-контента, PWA может стать выходом. Для бизнеса, активно использующего Интернет, наличие PWA позволит вам расширить свою пользовательскую базу через магазин приложений, а также будет очень рентабельно. Напротив, PWA может быть неправильным выбором для вас, если требуются функции, недоступные в Интернете.
2. Если у вас уже есть собственная база пользователей и приложение слишком тяжелое, что значительная часть вашей аудитории не устанавливает его, выберите «Lite» версию с использованием PWA. Однако у этого сценария будет недостаток. Когда дело доходит до аналитики, вам нужно будет тщательно разделить «тяжелую» версию приложения на «облегченную».
3. Как компания, если у вас есть услуги с добавленной стоимостью, подумайте о том, чтобы иметь PWA и собственное приложение для различных задач. Например, как розничный продавец вы можете захотеть предоставить основной магазин в виде PWA и отдельного нативного приложения для журнала / образа жизни. Или страховая компания может предлагать основную информацию и лидогенерацию в виде PWA и отдельного чат-бота / вспомогательного опыта / собственного приложения для обслуживания клиентов.

Примеры PWA в разных доменах и влияние на бизнес

Starbucks

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

George.com

У ведущего британского бренда одежды, входящего в состав ASDA Walmart, конверсия мобильных устройств выросла на 31 процент. Вот еще несколько статистических данных о преимуществах PWA -

Treebo

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

Как только после запуска PWA скорость загрузки страниц улучшилась, их общие показатели SEO начали заметно улучшаться. CTR вырос, средние рейтинги улучшились, и в результате общий органический трафик и коэффициент конверсии из органических источников значительно выросли. (Источник: Блог Treebo)

MakeMyTrip

Одна из ведущих туристических компаний Индии утроила коэффициент конверсии с помощью PWA. Кроме того, скорость загрузки их страниц увеличилась на 38%. Собственное приложение MakeMyTrip, которое скачали более 23 миллионов раз, незаменимо и составляет половину всех их заказов.

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

• Повышение коэффициента конверсии в 3 раза
• Время загрузки страницы уменьшилось на 38%
• Увеличение количества сеансов покупателей на 160%

(Источник: developers.google.com)

Ола

Города уровня 2 и уровня 3 (города с населением от 20 000 до 99 000 человек) создают уникальные проблемы и возможности для Олы. Спрос на устойчивые и надежные транспортные услуги быстро растет, и в этих областях его ждут с нетерпением. Люди в этих городах часто имеют дело с перебоями в подключении к сотовой сети и имеют недорогие смартфоны с невысоким объемом памяти и медленными процессорами. Эти пользователи менее склонны загружать и хранить нативные приложения на своих смартфонах, потому что нативные приложения требуют большого объема данных и занимают много места - приложение Ola для Android загружается на 60 Мбайт, а приложение для iOS - на 100 Мбайт. Было ясно, что Оле нужен другой способ связаться с этими пользователями.

PWA решил проблему.

Ola построила свой мобильный веб-сайт как прогрессивное веб-приложение (PWA). Используя всего 200 КБ данных для установки, PWA как минимум в 300 раз меньше, чем загрузка приложения для Android, и в 500 раз меньше, чем загрузка их приложения для iOS. При повторных посещениях используется всего 10 КБ. Такое низкое потребление данных означает первое посещение за 3,4 секунды и менее секунды для повторных посещений в сетях 2G и 3G - идеальное решение для миллионов индийцев.

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

Nikkei

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

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

Больше таких примеров можно найти на - https://developers.google.com/web/showcase

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

За более чем полувековой опыт разработки продуктов я вижу следующие ограничения PWA:

• Создание PWA - определенно растущая тенденция. Однако iOS по-прежнему не поддерживает push-уведомления в Интернете. PWA являются краеугольным камнем для разработки будущих приложений (особенно в корпоративной среде). Отсутствие этой функции определенно вредит разработчикам приложений. Push-уведомления - это основная часть PWA. Кроме того, это необходимо для замены разработки собственных или гибридных приложений.
• В настоящее время нет возможности показать какое-либо всплывающее окно для «Добавить на главный экран», как на Android, и вам нужно показать несколько подсказок с инструкциями о том, как получить PWA. Мы надеемся, что Apple решит эту проблему в ближайшем будущем. Скрещенные пальцы!
• PWA потребляют много заряда батареи. При создании PWA требуется много сложного кода. Следовательно, эти приложения очень быстро разряжают батарею по сравнению с собственными приложениями.
• Это не серьезный недостаток, но разработчикам необходимо обеспечить бесперебойную работу PWA в разных браузерах. Если он не оптимизирован для определенного браузера, например Safari, вы можете потерять часть своей целевой аудитории.

Заключение

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

FAQs

1. Что такое PWA?

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

2. Каковы преимущества использования PWA?

От экономии непомерных комиссионных для игровых магазинов до невероятно высокой производительности - PWA предлагают множество преимуществ. Они носят прогрессивный характер и защищены на 100%.

3. Какие компании / бренды имеют прогрессивные веб-приложения?

Крупные компании, такие как Starbucks, Ola Cabs, Twitter, Spotify, Instagram, Forbes, Uber, Pinterest и т. Д., Используют PWA, чтобы предоставить своим клиентам лучший пользовательский опыт.

4. Каковы недостатки использования PWA?

PWA потребляют много заряда батареи. При создании PWA требуется много сложного кода. Кроме того, iOS по-прежнему не поддерживает веб-push-уведомления.

5. Какие мифы окружают PWA?

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

6. Когда мне выбрать путь PWA?

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

7. Имеет ли прогрессивное веб-приложение реальное влияние на бизнес?

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