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

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

Что такое PWA

Повторим определение: 

Progressive Web Application (PWA) — это режим отображения веб-сайта, которое можно запускать в виде приложения на смартфоне. 

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

В России тоже сейчас наблюдается большой спрос на PWA-приложения. Многие российские банки и крупные компании уже опробовали или проявляют активный интерес к этой технологии. PWA используют Авиасейлс, IVI, Delivery Club, магазины DNS и Спортмастер, из банков — Сбер, Альфа-банк и Тинькофф. Но для многих всё ещё остаётся много страхов и опасений, и это оправданно, ведь перед тем, как пробовать новое, нужно понимать, какие сложности и ограничения поджидают на пути.

Как работают PWA-приложения

PWA работают на двух компонентах:

• Service Worker — слой между приложением и внешними серверами. Он определяет стратегии и распределяет, к какому ресурсу какую стратегию лучше применить.
• App Manifest — файл JSON, который ссылается на HTML-страницу приложения. Он определяет внешний вид и то, как будет вести себя при установке веб-приложение.

PWA-приложения запускаются силами браузера и поддерживаются:

• ОС: Android, iOS, macOS, Linux, Windows, Chrome OS;
• Браузерами: Chrome, Safari, Firefox, Edge, Samsung Internet.

Такое приложение умеет: 

• работать офлайн;
• работать в фоновом режиме;
• получать доступ к возможностям ОС смартфона;
• отправлять push-уведомления;
• обновляться в обход сторов;
• запускаться с иконки (ярлыка) на экране смартфона.

PWA — не панацея 

У него есть свои возможности и ограничения. Подробнее о них рассказали в этой статье — Может ли PWA стать заменой мобильному приложению.

Возможности:

• Независимость от сторов. PWA не нужно размещать в магазинах приложений — пользователи находят его в браузере и устанавливают ярлык на свой смартфон. Это экономит затраты на размещение и продвижение приложения в сторах и даёт свободу от политики модерации.
• Экономит место в смартфоне. Один факторов отказа пользователей от приложения — его слишком большой вес. Обычное приложение в среднем весит от 20 до 50 Мбайт, веб-приложение — менее 1 МБ.
• Экономит трафик. Так как веб-приложение не нужно скачивать, то и тратить на него трафик тоже не надо. Оно работает из мобильного браузера, на работу которого требуется в разы меньше интернет-трафика.
• Быстрая загрузка. В среднем, PWA загружаются менее чем за 1 секунду.
• Работает без интернета. Это происходит с помощью кэширования, именно оно позволяет PWA работать в автономном режиме.
• Гибкое. Веб-приложения работают на всех возможных операционных системах и на любых браузерах.
• Узнаваемое. Ярлык веб-приложения не отличается от привычного значка приложения.

Ограничения:

• Привычный функционал сильно урезан. PWA используют не все функции устройства. А те, что используют, работают, увы, не на всех ОС. Так, например на iOS нет возможности подключиться к Bluetooth и бесконтактной оплате. 
• Сложная дистрибуция. Из-за отсутствия таких приложений в сторах, вероятность, что пользователь случайно его найдет, минимальна. Ваши клиенты должны целенаправленно прийти на ваш сайт, а уже после добавить приложение на своё устройство. 
• Производительность ниже, чем на кастоме. Нативные и кроссплатформенные приложения намного производительнее, чем PWA. 
• Плохо дружат с Apple. Те функции, которые можно воссоздать на PWA, не всегда доступны на iOS. Из нашей таблицы видно, сколько возможностей Android и iOS поддерживает PWA.

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

Ограничения на iOS:

• Приложение PWA может хранить только 50 Мб данных и файлов — это разрешённое место для кэширования статики (js, html, css, изображения). Данные можно хранить в IndexedDB, ограничения которого чуть менее жёсткие и зависят от размера хранилища — 500 Мб при свободном месте 1Гб и больше.
• Если пользователь не использует приложение PWA в течение нескольких недель, iOS сбросит локальное хранилище. Это означает, что инициализация и подгрузка данных в кэш заново произойдет через интернет-соединение. Хотя значок по-прежнему будет отображаться на главном экране, при нажатии приложение PWA будет загружено снова. И если пользователь находится в месте с нестабильным интернет-соединением, это может вызвать проблемы.
• Невозможно использовать возможности Bluetooth, последовательного порта, маяка, Touch ID, Face ID, датчик высоты и информацию о батарее. Кое-что из этого можно обойти, пользуясь веб-разрешениями (например Face ID и Touch ID, которые появились в 14 версии). Но на каждое разрешение нужно одобрение пользователя, запросить всё и сразу не получится. Нужно точно знать, какие разрешения потребуются, чтобы точно сказать, что получится использовать, а что нет.
• PWA-приложение на iOS не может работать в фоне.
• Нет доступа к контактам.
• Нет push-уведомлений.
• Нет интеграции с Siri.

Ограничения Android:

• Невозможно определить геозоны (geofencing). Пока ни один поставщик не реализовал API, позволяющее его реализовать. Тем не менее, Google Chrome разрабатывает экспериментальную концепцию, которая может охватывать некоторые аспекты геозоны в будущем — триггеры уведомлений на основе местоположения.
• Нет датчиков приближения. API Proximity Events позволяет веб-приложениям получать доступ к данным от датчиков приближения устройства, определяя, есть ли рядом с устройством физический объект. Однако эта спецификация пока не реализована.
• Нет адаптивной фоновой подсветки. На Android пока нет доступа к уровню освещённости, обычно встроенному в камеру устройства. Первый подход к поддержке датчика интенсивности света был реализован в Firefox ещё в 2013 году. Экспериментальный вариант реализован в Google Chrome в рубрике «Дополнительные классы общих датчиков».

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

Когда нужно PWA-приложение  

Для начала нужно определиться, какие цели преследует бизнес: 

• Если нужна только веб-версия приложения, то подойдёт любой фреймворк. 
• Если есть планы в дальнейшем создать мобильное приложение, то лучше сразу написать его на кроссплатформе Flutter — это сократит time to market и позволит переиспользовать готовую кодовую базу на всех возможных платформах.
• Если есть риск попасть под санкции и что ваше приложение удалят из сторов. В этой статье мы писали об альтернативных магазинах приложений, а теперь к ним добавились веб-приложения, которые доступны без сторов. 

Каким отраслям актуально PWA:

• Банкам и финтеху — потому что есть риск попасть под санкции. Лишившись доступа в сторы, можно быстро развернуть веб-версию, не меняя процесса разработки и не переписывая всё с нуля.
• Ритейлу и e-commerce — потому что изначально написанное на Flutter приложение можно быстро адаптировать под веб. К примеру, 6 приложений (3 бренда на 2 платформах) можно оперативно превратить и в PWA. Так бизнес не только не потеряет аудиторию, но и приобретёт новых клиентов. Благодаря работе офлайн, ритейлеры могут повышать конверсию за счёт непрерывности сессий.
• Медиа и интертеймент — потому что весь функционал приложения можно перенести на веб и увеличить просмотры и аудиторию.

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

На чём пишут PWA

• на любом web-фреймворке, например, обновлённый Flutter 3.0 как раз под это заточен: теперь на единой кодовой базе можно создавать мобильные приложения, веб и десктоп-версии.

Почему Flutter идеально подходит для PWA

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

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

Потому что до 80-95% единой кодовой базы можно переиспользовать в других платформах. Адаптации будут будут нужны только по платформенным фичам и по UX. Но всё же они займут меньше ресурсов, нежели написание проекта с нуля.

• Такой проект удобнее поддерживать.
• Разработчиков нужно будет меньше, а следовательно, сократится бюджет (в среднем на 40%).
• Тестирование проходит проще. Код проверяется один раз и под все платформы.
• Поддержка и коммуникация станет прозрачнее. На проекте работает сплочённая команда с пересекающимися компетенциями.
• Проект, написанный на Flutter, может быстро скомпилироваться в PWA и обратно.

Наш опыт разработки PWA на Flutter web

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

Это было банковское приложение — один из реальных проектов Surf.

Особенности проекта: 

• приложение большое — со всей необходимой функциональностью;
• отвечает нашим внутренним стандартам Flutter разработки;
• может попасть под санкции, а значит, идеально подходит для исследования.

Поскольку приложение объёмное, для исследования мы взяли несколько основных экранов:

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

Вот несколько вопросов, с которыми мы столкнулись:

Вопрос № 1. Как устанавливаются PWA приложения?

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

Вопрос № 2. Как понять, что мы находимся внутри PWA?

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

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

Мы более 12 лет работаем с мобильными технологиями, в частности, с финтехом. Более 3,5 лет работаем с Flutter и убедились, что он одинаково хорошо подходит как зарубежным финтех-стартапам, российским b2b проектам и банкам для физических лиц.

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