PWA + Flutter: созданы друг для друга

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

Новые подходы рождают много вопросов и сомнений: действительно ли PWA сможет заменить мобильное приложение? На какой технологии его разработать? Какие ограничения и ошибки могут возникнуть?

Читайте в статье о плюсах и минусах при запуске PWA и нашем опыте: как мы опробовали на одном из клиентов-банков Flutter Web и убедились, что PWA на Flutter — это удобное и эффективное решение.

• Что такое PWA и как это работает

• Возможности и ограничения PWA
• Почему лучше всего его создавать на Flutter
• Наш опыт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Проект, написанный на Flutter, может быстро скомпилироваться в PWA и обратно.

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

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

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

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

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

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

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

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

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

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

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

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

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