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

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

Вы в блоге Surf. Мы более 12 лет работаем с мобильными технологиями. Переиспользуем успешный опыт из разных отраслей и помогаем крупным игрокам войти в топ. Среди наших клиентов лидеры своей сферы — Росбанк, Рив Гош, Бетховен и KFC.

💼Узнайте больше о нашем опыте веб-разработки.

📱 В канале в Telegram делимся своим продуктовым видением.

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

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

В этой статье:

Всё понятно и очень интересно

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

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

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

Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Falmanac.httparchive.org%2Fen%2F2021%2Fpwa&postId=455605" rel="nofollow noreferrer noopener" target="_blank">almanac.org</a>
Источник: almanac.org

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

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

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

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

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 + Flutter: созданы друг для друга

Ограничения на 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: созданы друг для друга

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 устанавливает напрямую с вашего сайта, путём создания ярлыка на экран.

Как установить приложение PWA на свой смартфон

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

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

18
1
6 комментариев