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

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

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

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

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

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

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

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

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

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

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

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

Источник: almanac.org

В России тоже сейчас наблюдается большой спрос на 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 стать заменой мобильному приложению.

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

  • Независимость от сторов. 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, конечно, имеет свои особенности и ограничения, но есть ситуации, когда эта технология может быть полезна (или даже спасительна) для бизнеса.

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

0
6 комментариев
Написать комментарий...
Евгений Быковских

Когда мы думаем о том чтобы "установить приложение", у нас в голове уже есть привычка и инструкция – зайти в маркет, нажать установить, все.

Технология PWA появилась довольно давно, но сформировалась ли такая привычка для нее? Или для пользователя кнопка "добавить на главный экран" все еще скрытый функционал?

Ответить
Развернуть ветку
Surf
Автор

Точно отточенной привычки у пользователей в большинстве своём пока нет, вы правы. Но установить его и правда легко: гифка в конце статьи — тому подтверждение :)

Ответить
Развернуть ветку
Евгений Быковских

Установить легко, это правда :)
Не имели дело c оберткой PWA в WebView, чтобы запихнуть на маркет?

Ответить
Развернуть ветку
Surf
Автор

В нашем случае в этом не было необходимости, т.к. для загрузки в маркет мы используем сборку, которую нам предоставляет Flutter. Но загружать PWA в маркет можно, это уже будет называться TWA (Trusted Web Activities). Об этом можно прочитать в блоге Think With Google: https://www.thinkwithgoogle.com/intl/ru-ru/marketing-strategies/app-and-mobile/pwa/

Ответить
Развернуть ветку
Alexander Belousov

Большой недостаток при компилировании flutter приложений в PWA - их итоговый вес.

Файл main.dart.js и другие js файлы в итоге весят по 7-8 мбайт и если у пользователя старое устройство или медленный интернет, то загрузка и старт приложения занимают очень много времени.

Ответить
Развернуть ветку
Surf
Автор

Александр, да, действительно, это является минусом при переходе на веб-версию. В качестве решения можно использовать механизм отложенных компонентов, при котором исполняемый файл будет разбит на несколько более мелких и будут подгружаться по мере надобности. Подробнее можете почитать в официальной документации Flutter:
https://docs.flutter.dev/perf/deferred-components

Ответить
Развернуть ветку
3 комментария
Раскрывать всегда