PWA + Flutter: созданы друг для друга
Новая реальность диктует новые решения. Банки и крупные российские компании, чьи приложения удалили из сторов, переходят к альтернативным вариантам доставки своих мобильных приложений до пользователей. Одним из них может стать PWA: банк создаёт веб-версию своего продукта и дистрибутирует его в обход сторов.
Вы в блоге Surf. Мы более 12 лет работаем с мобильными технологиями. Переиспользуем успешный опыт из разных отраслей и помогаем крупным игрокам войти в топ. Среди наших клиентов лидеры своей сферы — Росбанк, Рив Гош, Бетховен и KFC.
💼Узнайте больше о нашем опыте веб-разработки.
📱 В канале в Telegram делимся своим продуктовым видением.
Новые подходы рождают много вопросов и сомнений: действительно ли PWA сможет заменить мобильное приложение? На какой технологии его разработать? Какие ограничения и ошибки могут возникнуть?
Читайте в статье о плюсах и минусах при запуске PWA и нашем опыте: как мы опробовали на одном из клиентов-банков Flutter Web и убедились, что PWA на Flutter — это удобное и эффективное решение.
В этой статье:
Всё понятно и очень интересно
Повторим определение:
Progressive Web Application (PWA) — это режим отображения веб-сайта, которое можно запускать в виде приложения на смартфоне.
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 стать заменой мобильному приложению.
Возможности:
- Независимость от сторов. 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 устанавливает напрямую с вашего сайта, путём создания ярлыка на экран.
Попробовав перевести готовое банковское Flutter-приложение на PWA, мы убедились, что это выход для многих сфер бизнеса, которые остались без доступа к привычным сторам. С помощью этой технологии продукт найдёт своего клиента без перерыва на обход санкций. Хотя у PWA есть и минусы, особенно при работе с платформой iOS.
Пока все были заняты мобильной разработкой, PWA вырос и окреп. Мы попробовали перенести один из проектов на веб-платформу. Опыт оказался полезным как разработчикам, так и бизнесу. Первые понимают, как это делать пошагово и какие особенности могут возникнуть, а второй — не останется без клиентов, так как не потеряет свою аудиторию и продолжит работать в прежнем режиме, несмотря на санкции.
Если хотите хотите создать PWA приложение, пишите нам на vc_hello@surfstudio.ru.
Читайте о нашем опыте разработки на Flutter и веб-разработки.
Рекомендуем почитать:
✅Как мы полностью изменили своё мнение о Flutter
✅Антикризисные технологии: может ли PWA стать заменой мобильному приложению
✅Как за 6 месяцев разработать банковское приложение под ключ