Progressive web app что это

Обзор прогрессивных веб-приложений (PWA)

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

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

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

Интерфейсы, подобные собственному коду

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

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

Расширенные возможности

PWA также имеют доступ к расширенным возможностям. Пример

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

Преимущества, связанные с Веб-сайтом

Наконец, PWA могут работать в веб-браузерах, как и веб-сайты. Запуск как веб-сайты дает PWA с преимуществами, такими как:

• PWA могут индексироваться поисковыми системами.
• PWA можно совместно использовать и запускать по стандартной веб-ссылке.
• PWA безопасны для пользователей, так как они используют безопасные конечные точки HTTPS и другие меры безопасности пользователей.
• PWA адаптируются к размеру экрана или ориентации пользователя, а также методу ввода.
• PWA могут использовать расширенные веб-API, такие как WebBluetooth, WebUSB, WebPayment, WebAuthn или WebAssembly.

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

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

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

Совместимость между устройствами

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

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

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

Преодоление разрыва между веб-сайтом и собственными

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

• Обработка файлов.
• Совместное использование содержимого с другими приложениями.
• Получите доступ к буферу обмена.
• Синхронизация данных и получение ресурсов в фоновом режиме.
• Доступ к оборудованию устройства, такому как Bluetooth и USB.
• Хранение содержимого в базах данных.
• Воспользуйтесь преимуществами аппаратного ускорения графики.
• Используйте макеты CSS, анимации и фильтры для создания расширенных проектов.
• Запустите почти скомпилированный код производительности с помощью WebAssembly.

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

Примеры того, что могут делать PWA, см. в статье Myth Busting PWA.

The Microsoft Store

Поскольку прогрессивные веб-приложения (PWA) похожи на другие приложения в Microsoft Store, пользователи могут в полной мере взаимодействовать с ними — от обнаружения, установки до выполнения, — не открывая браузер.

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

Истории успеха

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

• Starbucks PWA увеличил ежедневно активных пользователей в два раза. Заказы на настольных компьютерах почти такие же, как мобильные (исходные).
• Trivago увидел увеличение на 150% для людей, которые добавляют его PWA на начальный экран. Увеличение вовлеченности привело к 97%-му увеличению часов ожидания для предложений отелей (источник).
• Tinder сократил время загрузки с 11,91 секунды до 4,68 секунды с помощью PWA. Приложение на 90 % меньше, чем скомпилированное приложение Android (источник).

Дополнительные истории успеха см. на веб-сайте PWA Stats .

См. также

• Прогрессивные веб-приложения в MDN Web Docs.
• Прогрессивные веб-приложения на web.dev.
• Прогрессивные веб-приложения в Википедии.
• PWA Q&A

PWA — это просто

Понятие Progressive Web Applications (PWA) на слуху давно, с весны 2018 года приложения этого класса поддерживаются всеми основными браузерами, однако распространенность технологий PWA несмотря на очевидные их «плюсы» пока очень низка.

Специалисты Google (в том числе и на Хабре) очень информативно и компетентно пишут о PWA, но их рекомендации полезны больше тем, кто уже знаком с предметом. Данная статья призвана показать, что Progressive Web Apps — это не сложно, и использовать эти технологии можно и нужно уже сейчас разработчикам любых сайтов.

Философия PWA

Для начала стоит заметить, что нет точного определения PWA приложения. Нельзя четко сказать, вот этот сайт PWA или нет. Это протяженная шкала, на которой могут располагаться и «хоумпейдж» второкурсника Пети, который добавил web app манифест, создающий иконку сайта на домашнем экране мобильника; и внешне ничем не отличимый от обычного новостной сайт, только пользователи которого могут сказать, что он удивительно быстрый и удобный, а всё потому что где-то внутри него бьется горячее сердце работника сферы услуг (service worker’a).

Относительность PWA заложена в самом названии — «прогрессивное». Прогрессивный сравнительно с чем и в какой мере? Но эта относительность, на самом деле, очень хороша, потому что изучать технологии PWA и применять их в своих текущих проектах можно постепенно, без глобального ремоделинга и рефакторинга.

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

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

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

Целевые показатели расшифровываются следующим образом:

Надежность (Reliable) — приложение загружается и показывается сразу же, вне зависимости от статуса и качества сетевого соединения.
Быстрота (Fast) — взаимообмен данными по сети происходит быстро, UI плавный и отзывчивый.
Привлекательность (Engaging) — делает для пользователя опыт работы с приложением комфортным и приятным, побуждая его захотеть пережить его снова, и снова, и снова…

С точки зрения Google, именно это отделяет сейчас по внешнему виду и ощущениями (look and feel) веб-сайты от нативных приложений.

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

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

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

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

И в кои-то веки всё это одинаково работает на всех основных браузерах и на всех основных платформах.

Google атакует iOS

Есть мобильные приложения, которым нужно быть нативными (необходима производительность, доступ к системным ресурсам и др.), однако есть приложения, которые в своем функционале вполне реализуемы как PWA. Для них теперь:

— Не нужно писать различные версии для Android и iOS (и Windows)
— Не нужно регистрировать в Google Play и App Store и платить за это
— Открыт прямой выход на десктоп

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

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

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

APK vs PWA

Из личного опыта можно вспомнить, как после перевода одного новостного сайта на работу с Service Worker, было решено отказаться от Андроид приложения, сделанного по функционалу сайта. И не столько потому, что его поддержка занимала человеческие ресурсы, а потому, что PWA версия, как ни удивительно, была быстрее, красивее и удобнее в работе, чем java приложение.

Технологии

Кратко рассмотрим основные движители PWA.

Service Worker

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

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

Можно, например, принять запрос от браузера, проверить состояние сети, взять данные из хранилища, произвести с ними операции и вернуть некий результат обратно в браузер — который будет думать, что ответ ему пришел от сервера. Или не будет — как разработчик захочет, так и сделает. Два браузерных слоя (клиентский фронтэнд и Service Worker) позволяют писать полноценные приложения.

В тоже время, для большинства сайтов будет достаточно кэширующей функциональности Service Worker’a, чтобы превратиться в PWA.

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

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

HTTPS

PWA требует, чтобы все ресурсы сайта передавались по HTTPS протоколу. SSL сертификат можно получить бесплатно, некоторые хостеры это делают за вас. Но критично, чтобы на сайте не было ссылок на незащищенные ресурсы — некоторые браузеры просто не будут отображать сайт в этом случае.

Основная встречаемая в таких случаях проблема — картинки. Часто редакторы или комментаторы ставят в материал ссылки на картинки из интернета, иногда они автоматически туда (в материал) попадают. Необходимо картинки пересохранять или к себе, или на сервис с доступом по HTTPS.

Application Shell

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

Суть в том, что app shell хранится на клиенте и загружается при запуске приложения, а затем уже в него грузится из сети динамическая информация. И пока она грузится, app shell должен выглядеть красиво («лоадеры» на местах и т.п.)

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

App shell — это как оболочка нативной программы. Смотрите на свое PWA как на нативную программу, и многое станет проще.

Web App manifest

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

Push Notifications

Если посерфить интернет с Chrome DevTools, открытым на вкладке Application, то можно увидеть, как мало сайтов пользуют PWA технологии. А 90% тех, что пользуют, делают это только ради Push Notifications.

Пока что это самая популярная и самая злоупотребляемая технология PWA — за последние несколько месяцев число сайтов, заходя на которые первым делом ищешь «мышкой» кнопку «Блокировать» на предложение получать самые свежие новости, выросло, такое ощущение, многократно, а само желание навязать свой Push похоже на Spam.

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

Google PWA checklist

Push notifications must be timely, precise and relevant

Enable push notifications from the site and ensure the use cases they’re using the push notifications for are:
Timely — A timely notification is one that appears when users want it and when it matters to them.
Precise — A precise notification is one that has specific information that can be acted on immediately.
Relevant — A relevant message is one about people or subjects that the user cares about.

See our guide on creating great push notifications for advice. If your content is not timely and relevant to this user, consider using email instead.

• PWA
• service worker
• javascript
• Progressive Web Applications

PWA-приложения. Что это такое и для чего бизнесу создавать приложение из сайта

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

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

Записал видео, для тех кто не хочет читать много текста

Что такое PWA

PWA или Progressive Web Application – технология, которая позволяет клиентам установить ваш сайт на смартфон как приложение. На русский язык переводиться как «прогрессивное веб-приложение».

Теперь не нужно разрабатывать отдельно сайт, приложение под iOS и приложение под Android. Достаточно иметь и поддерживать только сайт.

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

Бренды Twitter, Tinder, Uber, Telegram, Starbucks, Forbes, AliExpress, Aviasales используют приложения на базе PWA как основе или в дополнение к мобильному приложению.

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

1. Позволяет отправлять Push-уведомления.
2. Разработка и поддержка на 70% дешевле, чем у мобильных приложений.
3. Экономия на повторном привлечении клиента, так как нет расходов на инструменты возвращения клиента (ретаргетинг, ремаркетинг).
4. Не нужно размещать приложение в AppStore и Google Play. Его можно скачать напрямую с вашего сайта.
5. Работает быстрее чем сайт.
6. Работает без интернета.
7. Размер PWA приложения, как правило, не превышает 1 мб. Это меньше, чем мобильное приложение.
8. PWA приложение работает с функциями: геолокация, камера, микрофон.

Недостатки PWA приложения:

1. На момент написания статьи у PWA приложение нет возможности отправлять уведомления на iPhone, так как в iOS браузер по умолчанию Safari. Однако в iOS 14 Apple добавила функцию выбора браузера по умолчанию. Это означает, что если пользователь выберет стандартным браузером не Safari, то уведомления можно будет отправлять и на iPhone.
2. Также PWA приложения не поддерживают функцию Touch ID и ограниченно работают с функцией Bluetooth.

Какие задачи можно решать при помощи приложения на базе PWA

• Стимулировать повторные продажи.
• Упрощать поиск компании. Доступ к компании в 1 нажатие на экране.
• Повышать узнаваемость бренда. Иконка (логотип) компании всегда на виду у пользователя
• Повышать средний чек сделки, допродавая продукты при помощи Push-уведомлений.
• Оставаться на связи с клиентом. Отаравляйте клиенту уведомления о том, что товар прибыл в пункт самовывоза. Или что товар будет доставлен сегодня.
• Экономить на рекламе. Теперь не нужно настраивать догоняющую рекламу с новой акцией. Достаточно отправить уведомления, которое точно заметят ваши клиенты.
• Избавиться от конкуренции в поисковой выдачи. Ваши клиенты обращаются через приложение, в котором нет конкурентов, в отличии от поисковой выдачи.

Каким бизнесам подходят PWA приложения

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

Ниже описал подробнее как можно использовать приложение на базе PWA

• Клиенты смогут в 1 клик повторно заказывать услугу.
• Вы сможете анализировать частоту заказов каждым клиентом и отправлять напоминания об уборке заранее, увеличивая частоту покупок

2. Рестораны, кафе, пиццерии и сети доставок

• Клиенты смогут в 1 клик заказывать продукцию или бронировать столик.
• Вы сможете стимулировать клиентов заказывать больше путем отправки промокодов со скидками и акциями.
• Вы сможете использовать карты лояльности при помощи приложения и QR-кодов.

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

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

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

6. Барбершопам и бьюти сфера.

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

7. Сетевые компании

• Вы сможете уведомлять клиентов о поступлении новых продуктов, или о статусе доставке.
• Пользователи смогут найти вас в 1 клик, что повысит частоту посещений вашего ресурса.
• Клиенты смогут выбрать необходимый товар без отвлечений. И если они положили товар в корзину, но при этом не оформили заказ вы можете напомнить об этом и простимулировать к покупке при помощи уведомлений со скидкой или подарком.
• Клиенты смогут выбирать товар без интернета. А когда он появиться, данные автоматически подгружаются к вам.

• Напоминайте клиентам о замене масла или других периодических работах по обслуживанию авто.
• Уведомляете клиента о статусе ремонта.
• Благодарите постоянных клиентов подарками.
• Делайте допродажи товаров по уходу за автомобилем при помощи push-уведомлений

9. Сервисы по шерингу техники

• Пользователи смогут найти вас в 1 клик, что поможет им оперативно решать возникшие проблемы.
• Отправляйте уведомления о состоянии техники (Автомобиль забронирован) или о новых акциях и скидках.
• Благодарите постоянных клиентов подарками.

Как происходит процесс установки

Вы можете сами пройти процесс установки, открыв в браузере на мобильном устройстве страницу.

1. Пользователь переходит на сайт и видит всплывающее окно с предложением. Например: «Пицца со скидкой 25% при заказе с приложения».

2. Пользователь в один клик устанавливает приложение.

3. Пользователь переходит в приложение, внутри этого приложения открывается сайт и пользователь делает заказ со скидкой.

4. Приложение установлено. Следующий шаг, это отправка пуш уведомлений пользователю.

Сравнение PWA с сайтом и мобильным приложением
О чем еще стоит упомянуть

• PWA можно загрузить и продвигать в Google Play.
• PWA можно создать для части сайта.
• Приложение обновляется при помощи кэша, то есть каждый раз, когда пользователь заходит в приложении с включенным интернетом.
• Отслеживать установку приложений можно при помощи сервиса «Яндекс. Метрика».

Подробнее про разработку PWA приложения можете узнать на специальной странице.

На этом пока все. Вкратце описал, что такое приложении на базе PWA технологии и как его можно использовать именно с позиции маркетолога.

Далее планирую сделать еще 2 статьи и поделиться результатами внедрения такого приложения, а также рассказать подробнее как составить и отправить Push-уведомление в приложении на базе PWA.

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

Спасибо за уделенное время!

25 показов
75K открытий
17 комментариев
Написать комментарий.

Давно существуют бесплатные ресурсы для изготовления таких пва. Не хватает ссылок на них и небольшого обзора.

Развернуть ветку

Чтобы сделать универсальное PWA, которое нативно (!) работает на Android и iOS и при этом достаточно хорошо работает в браузере, можно использовать «React Native for Web» – https://github.com/necolas/react-native-web

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

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

Развернуть ветку

Задам глупый вопрос: чем React Native for Web принципиально отличается от Flutter? Начал ковырять последний, по сути, тоже полунативное приложение получается на выходе

Развернуть ветку

Вопрос не глупый (-:

Смысл у разработок одинаковый: обеспечить кроссплатформенность приложений.

Разница в вендорах:
— Flutter делает Google
— React Native for Web делает комьюнити Фейсбука

Не сам Фейсбук, но комьюнити, которое выстроено вокруг React Native и React. В свою очередь, React и React Native обслуживаются инженерами фейсбука.

Я предпочитаю наработки Facebook, потому что они прогрессивнее. Гугл иногда очень странным образом «застревает» в своих наработках и/или перестаёт их двигать вперёд или заводит их куда-то не туда. Так было с Material Design, так было с первыми версиями ангуляра и многими другими штуками. А уж сколько они продуктовых наработок похоронили – я вообще молчу.

Развернуть ветку

Разница не только в вендорах, есть существенная техническая разница.

Для начала — в принципиальном подходе: flutter эмулирует интерфейс платформы, а react native позволяет задействовать нативные элементы интерфейса.

Есть разница и во взаимодействии с платформой: react native — это стандартный js с виртуальной машиной, которая так или иначе взаимодействует с нативной платформой, раньше — через пресловутый js bridge, сейчас делают существенно более быстрый JNI, который позволит более прямо взаимодействовать с объектами платформы. У Flutter — это гугловский язык Dart с компиляцией в нативный код, который напрямую взаимодействует с платформой.

Развернуть ветку

Насколько я понял, его пока не интересуют такие детали внутренних взаимодействий. В деталях отличий там очень много 🙂

Развернуть ветку

Спасибо за ответ!
Субъективно, что на Ваш взгляд проще для «не веб-программистов»? Давно хочу сделать визуализацию данных со своего API делать не в Telegram, а в веб и/или в приложение для Android.

Развернуть ветку

Думаю, что Flutter попроще будет. Дело в том, что «React Native for Web» – это оболочка над React Native, который в свою очередь использует компоненты и принципы React.

То есть для его использования желательно изучить:
1. React
2. React Native
3. React Native for Web
4. При этом для стилизации UI тоже нужно будет подключать какой-то отдельный компонент.

В свою очередь Flutter более целостный и упакованный – в нём достаточно хорошо интегрированы готовые виджеты, компоненты и всё это основано на языке программирования Dart 🙂 То есть Flutter, как мне кажется, проще учить с нуля, не проходя поэтапное изучение различных технологий.

При этом, в обоих случаях, конечно, должны быть базовые знания HTML/CSS/JS и понимание архитектуры мобильных платформ.

PWA приложения VS классические: новые возможности для банков

Почему на PWA приложения растёт спрос? Многие приложения российских банков, такие как Сбербанк, Альфа-банк, ВТБ, ПСБ, Tinkoff и другие из-за санкций оказались удалены из сторов. Бизнес находится в поиске альтернативных решений, и одно из них — технология Progressive Web Applications (PWA), или прогрессивные веб-приложения.

Технология была разработана ещё в 2000 году в Microsoft, а в 2015 году Google стал развивать её для использования на Android, но из-за скудного на тот момент user experience она не смогла завоевать внимание разработчиков. Сейчас она может стать полноценной заменой классическим приложениям и привычному App Store, и в этой статье мы расскажем, почему на неё стоит обратить внимание и какие есть плюсы и минусы PWA для банков и крупного бизнеса.

PWA: принципы работы

PWA — это технология, которая визуально и функционально преобразует сайт в приложение. Его можно открыть в браузере или загрузить как обычное мобильное приложение на своём смартфоне. Получается «продвинутая версия сайта» с адаптацией под устройства пользователей, и не нужно специально разрабатывать версии для Android или iPhone.

Для прогрессивного приложения характерны:

• Использование Service Worker — прокси-сервера, который управляет сетевым запросом от приложения и даёт возможность кэширования и запоминания информации, отвечает за фоновую синхронизацию, позволяет присылать push-уведомления для полноценной коммуникации с клиентами.
• Работает со своими ресурсами с помощью HTTPS через браузер — так же, как нативное приложение обращается через файловую систему. Браузер выступает в роли виртуальной машины, которая запускает PWA приложение.
• Web App Manifest — текстовый json-файл, который добавляется в код страницы сайта. Он определяет, как будет отображаться приложение через браузер, то есть все визуальные элементы.

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

Создаём приложения, с которыми удобно развивать бизнес

Плюсы PWA

1. Свобода от сторов. Прогрессивные веб-приложения не нужно размещать в сторах — пользователи скачивают его прямо из браузера. Это экономит время пользователя, а также ваш бюджет на добавление и продвижение приложения в сторах.
2. Офлайн-режим. Пользователям не нужно быть подключенным к интернету для некоторых операций. Это возможно благодаря Service Workers — специальному прокси-решению от Google. Кэширование позволяет PWA работать в автономном режиме даже при потере соединения с сервером, а затем синхронизирует всю информацию при подключении.

1. Скорость. PWA загружаются очень быстро благодаря HTML-отдаче. С момента загрузки до появления первого элемента или изображения обычно проходит не более 1 секунды.
2. Лёгкость. Одна из основных причин удаления приложений согласно маркетинговым исследованиям — ограниченный размер памяти смартфонов. К примеру, вес среднего приложения варьируется от 20 до 50 МБ, вес высоконагруженных может доходить до 300. В то время как установленное PWA приложение занимает менее 1 МБ.
3. Лояльность клиентов. Google провёл исследование, согласно которому 50% пользователей смартфонов с большей вероятностью готовы использовать сайты для мобильных устройств, потому что не хотят загружать приложения. Возможность напрямую взаимодействовать с сервисом напрямую может повысить доверие пользователей.
4. Адаптивность. PWA подстраиваются под любое пользовательское окружение. Они работают на всех возможных системах, устройствах и браузерах. Это достигается за счёт единой базы исходного кода.
5. Узнаваемость. При загрузке PWA на свой смартфон можно установить ярлык на экран. Визуально он не будет отличаться от привычного значка приложения.

Недостатки PWA

1. Ограниченный функционал. PWA приложения используют не все функции устройства. Например, сильно урезан доступ к контактам, календарю, Bluetooth и NFC. Так как разработчики PWA ограничены возможностями браузеров, то использовать все системные API невозможно. Если бизнес-модель подразумевает активное использование функций смартфона, то разумнее выбрать кастомное приложение вместо PWA.
2. Меньшая виральность. Путь пользователя к сайту компании может быть долгим — многие активно пользуются stores. В случае с PWA они должны сами посетить тот сайт, который им нужен, а уже после добавить приложение на своё устройство. Поэтому бизнесу стоит учесть, что нужно заложить дополнительный бюджет на продвижение или пройти модерацию каталогов приложений.
3. Низкая производительность. Производительность кастомных (нативных и кроссплатформенных) приложений выше, чем у PWA. На высококонкурентном рынке это может стать ключевым запросом большой аудитории.
4. Низкая совместимость сiOS. Совместимость прогрессивных веб-приложений с браузерами и операционными системами всё ещё находится на стадии разработки. В частности, iOS поддерживает не все функции PWA: недоступен Bluetooth, Siri, отправка уведомлений, Face и Touch ID. От этого пользовательский интерфейс ограничен. Однако в связи с ростом популярности PWA, Apple постепенно предоставляет API для обхода этих ограничений. Например, в iOS 15.4 в экспериментальном режиме предоставлена возможность взаимодействия с push-уведомлениями, а это значит, что в ближайшем будущем это будет работать на iOS.
5. Большой расход батареи. Из-за использования JavaScript вместо Java прогрессивные веб-приложения быстрее сажают батарею телефона и расходуют больше ресурсов.

PWA и кастомные приложения: что лучше

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

Всё ли хорошо с конверсией?

В сфере e-commerce и FinTech важно помнить про коэффициент конверсии (conversion rate), так как это один из главных показателей успешности бизнеса. Мы сравнивали его в коробочном и кастомном приложениях. Теперь посмотрим, как PWA усиливает этот показатель.

PWA приложение повышает конверсию, так как:

• Загружается в течение нескольких секунд. В среднем — около 1 секунды. Время для пользователя критически важно: почти 70% пользователей мобильных приложений утверждают, что скорость загрузки решает, будут ли они пользоваться приложением дальше. 53% пользователей удаляют приложение, если оно загружается дольше 3 секунд.
• Подключены к голосовому поиску. PWA воспринимаются поисковыми системами как обычные сайты, что позволяет легче находить их. Умные колонки (Alexa, Алиса или Google Home) также просто интегрируются с PWA. Это поможет пользователям больше взаимодействовать с бизнесом и совершать целевые действия даже без устройства в руках.
• Единообразный UX. В PWA поддерживать один стиль интерфейса проще и дешевле, чем в других приложениях — не нужно разрабатывать отдельно для каждого устройства. Это также позволит пользователям iPhone легче взаимодействовать с продуктом.

Кейсы использования PWA

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

Сбербанк использует PWA приложение совместно с App Authentification и отмечает его особые удобства для владельцев iOS — теперь пользователи могут пользоваться веб-версией как приложением и для его установки не нужно идти в офис банка.

Spotify смогли уйти от санкций в App Store благодаря разработке PWA приложения. Они отметили, что у PWA адаптивный UI, что дало возможность приложению работать гораздо быстрее. Пользователи могут использовать новое приложение как аналог обычно загружаемого из AppStore — и говорят, что стало в несколько раз удобнее.

Starbucks провели эксперимент и разработали PWA, чтобы собирать больше заказов вместе с мобильным приложением. Выяснилось, что PWA оказалось меньше по весу на 99,84% по сравнению с классическим приложением. Выбор пользователей был сделан в пользу PWA. Количество заказов увеличилось в два раза и почти сравнялось с декстоп-заказами.

Только 1% мобильный пользователей Pinterest переходили к целевому действию: регистрации, входу в систему или установке приложений. Когда компания разработала PWA приложение, клиенты стали проводить на 60% больше времени в соцсети, а доход вырос от создаваемой пользователями рекламы.

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

MakeMyTrip — крупнейшая туристическая компания Индии, MAU сайта — более 8 млн пользователей. После запуска PWA коэффициент конверсии увеличился в 3 раза, а скорость загрузки страниц выросла на 38%.

Как мы разработали кроссплатформенное приложение для банка

Как Surf разработал PWA

В Surf мы накопили опыт разработки подобных решений для клиентов и создали концепт онлайн-банка. По сути, это 3 приложения в 1: для мобильных устройств, веба и десктопа.

Разработано на базе Flutter — кроссплатформенного фреймворка от Google. Позволяет, используя одну кодовую базу, создавать PWA приложения сразу для нескольких платформ и снижает затраты на разработку до 60%. На Flutter уже работает множество приложений из разных сфер: от сервисов доставки до автоконцернов и, например, Росбанк.

Что даёт разработка прогрессивного веб-приложения на Flutter:

• адаптация и корректное отображение на всех устройствах — разработка PWA приложения на Flutter позволит не тратить время и ресурсы на настройку каждой платформы, а получить результат сразу на всех — iOS, Android, Web, Windows, MacOS.
• тестирование — проще по сравнению с разработкой отдельного PWA без фреймворка, так как код проверяется один раз на все платформы и нет необходимости пересборки всего продукта;
• использование всех возможностейiOSи Android. Кроссплатформенная разработка не отличается по сложности или дается легче, чем нативная, так как использует всё те же нативные технологии самой платформы. Например, в приложении на Flutter можно, как и в нативном, использовать Touch и Face ID, сканер отпечатка пальца, GPS и камеру.
• гибкость — можно использовать уже существующее приложение и адаптировать под запрос своего бизнеса;
• экономия — разработчиков на проекте будет меньше, часов на разработку потребуется также меньше, в итоге сократятся расходы по сравнению с разработкой нативных приложений;
• безопасность — код приложения на Flutter зашифрован так, чтобы его нельзя было восстановить с помощью реверс-инжиниринга — процесса копирования объекта по уже готовому образцу, то есть уровень безопасности такого приложения высокий.

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