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

Дмитрий
5 min readJun 19, 2021
Что такое прогрессивные веб-приложения?

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

Поскольку прогрессивное веб-приложение — это тип веб-страницы или веб-сайта, известный как веб-приложение, они не требуют отдельного объединения или распространения. Разработчики могут просто опубликовать веб-приложение в Интернете, убедиться, что оно соответствует базовым «требованиям к возможности установки», а пользователи смогут добавить приложение на свой домашний экран. Публикация приложения в системах цифрового распространения, таких как Apple App Store или Google Play, не является обязательной.

С 2021 года функции PWA в разной степени поддерживаются Google Chrome, Apple Safari, Firefox для Android и Microsoft Edge, но не Firefox для настольных ПК. Некоторые компании отмечают значительные улучшения в широком спектре ключевых показателей эффективности после внедрения PWA, таких как увеличение времени, затрачиваемого на страницу, конверсии или доход.

Технические компоненты PWA

Оболочка приложения

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

Service worker

Service worker — это независимый JS-файл, который действует как прокси для веб-страницы, имитируя содержимое страницы через кеш. Сервисный работник интегрирует функции собственных приложений, такие как разрешение push-уведомлений, фоновая синхронизация и быстрый автономный доступ.

Web-app manifest (Манифест веб-приложения)

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

Безопасность транспортного уровня

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

Преимущества создания PWA

PWA дешевле создавать и поддерживать, чем нативные приложения

Нативные приложения зависят от платформы, что означает, что вам нужно создать два разных приложения для платформ Android и iOS. Поскольку PWA не зависят от платформы, их разработка обходится дешевле.

Кроме того, существуют дополнительные сборы, связанные с собственными приложениями, например, плата за подписку на учетную запись для App-store / Play-store. Apple взимает дополнительные 30% от общей выручки от продаж (полученных через платформу iOS) с приложений электронной коммерции. С помощью PWA вы можете значительно сократить эти расходы.

PWA легче и быстрее, чем нативные приложения

PWA можно построить примерно на 90% легче, чем нативные приложения. Размер прогрессивных приложений может быть меньше 1 МБ. Например, размер приложения Twitter для iOS составляет 115,4 МБ, а для Twitter lite — всего 600 КБ. Это благо для пользователей с ограниченным объемом памяти на своих смартфонах.

Сниженное потребление данных

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

PWA интегрирует функции нативных приложений

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

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

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

PWA могут ранжироваться в поисковых системах

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

Существенные случаи использования PWA

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

СМИ:

ZEE5, потоковая платформа, запустила PWA в 2019 году, чтобы значительно сократить время буферизации на 50%. В то время как средняя веб-страница загружается примерно за 20 секунд, домашняя страница Forbes PWA загружается всего за 0,8 секунды. BookMyShow, приложение для мероприятий, зафиксировало коэффициент конверсии 80% благодаря PWA.

Электронная коммерция:

Starbucks удвоила количество ежедневных активных пользователей с помощью своего Progressive Web App. OLX, другой гигант электронной коммерции, продемонстрировал рост вовлеченности на 250%, увеличение CTR объявлений с push-уведомлениями на 146% и ускорение взаимодействия пользователей на 23% после запуска PWA.

Путешествия и гостеприимство:

MakeMyTrip зафиксировал 3-кратный коэффициент конверсии и 160% -ное увеличение пользовательских сеансов благодаря PWA. Аналогичным образом, Trivago засвидетельствовал 97% -ное увеличение количества кликов по предложениям отелей и 150% -ное увеличение количества учетных записей пользователей через PWA.

Стиль жизни:

Благодаря PWA Lancome увеличил коэффициент конверсии на 17% и количество мобильных сеансов на iOS на 53%. Мобильные продажи приложения также увеличились на 16% в годовом исчислении. Tinder PWA на 90% меньше, чем его собственные приложения. Приложение успешно сократило время загрузки с 11,91 секунды до 4,69 секунды с помощью PWA.

PWA — следующая большая вещь

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

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

--

--

Дмитрий

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