Почему PWA на Flutter — отличная идея

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

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

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

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

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

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

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

На чём пишут PWA

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

Flutter vs Ionic vs PWA: краткое сравнение

При выборе технологии важно понимать, чем отличаются подходы. Ionic позволяет быстро собирать гибридные приложения на базе web-view, но уступает в производительности и глубине нативной интеграции. Классические PWA хорошо подходят как лёгкое и доступное решение, но ограничены по функциональности, особенно на iOS.

В отличие от Ionic и нативных решений, Flutter PWA сочетает кроссплатформенность с быстрым time-to-market и даёт бизнесу возможность масштабироваться: из одной кодовой базы можно собрать мобильное, веб- и десктоп-приложение. Это сокращает бюджет и упрощает поддержку. Подробнее сравнили эти технологии в статье про Flutter и Ionic.

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

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

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

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

Потому что до 80-95% единой кодовой базы можно переиспользовать в других платформах. Это делает Flutter идеальной основой для разработки мобильных приложений под ключ. Адаптации будут нужны только по платформенным фичам и по 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 вырос и окреп. Мы попробовали перенести один из проектов на веб-платформу. Опыт оказался полезным как разработчикам, так и бизнесу. Первые знают, как это делать пошагово и какие особенности могут возникнуть, а второй — не останется без клиентов, так как не потеряет свою аудиторию и продолжит работать в прежнем режиме, несмотря на санкции.