Пуши для iOS, рост производительности — почему Flutter теперь ещё больше подходит для PWA
PWA уже давно не новинка на рынке антикризисных технологий. Мы подробно разбирали технологию в других статьях: как можно заменить мобильное приложение с помощью PWA, как создать PWA на Flutter, как сделать универсальное приложение для всех платформ и как отличить PWA от мобильного веба.
Освещая плюсы и минусы прогрессивных веб-приложений, каждый раз приходилось оговариваться, что всё ещё есть ряд ограничений, в частности, для iOS. Например, отсутствие в PWA push-уведомлений для iOS — серьёзный минус в борьбе за внимание пользователей. Кроме того, многие крупные компании с осторожностью смотрели в сторону PWA, так как было много неопределенности: возможно ли бесшовно перенести проект с натива на PWA и после снятия санкций вернуть его обратно, какую технологию выбрать для реализации.
В этой статье разберём: что нового во Flutter для PWA, и как теперь работают push для iOS.
О чём в этой статье
Доступность пушей для iOS в PWA
Apple выпустили первую бета-версию iOS 16.4, в которой появилась поддержка Web Push и других функций для веб-приложений.
Начиная с первого iPhone, пользователи могли добавлять ярлык любого сайта на главный экран своего смартфона. Делается это просто: пользователь нажимает кнопку «Поделиться», чтобы открыть меню, затем нажимает «Добавить на главный экран», значок выбранного сайта появляется на главном экране. Но возможность отправлять push-уведомления из PWA для iOS не была реализована до недавнего времени.
Теперь веб-приложение, добавленное на главный экран iPhone, может запрашивать разрешение на получение push-уведомлений, если этот запрос является ответом на прямое взаимодействие с пользователем. Только после этого iOS предлагает пользователю дать веб-приложению разрешение на отправку уведомлений. После разрешения пользователь может управлять этими настройками для каждого веб-приложения.
Уведомления от веб-приложений работают точно так же, как уведомления от других приложений. Они отображаются на экране блокировки, в «Центре уведомлений» и на подключённых Apple Watch.
Что это даст вашему приложению? Вы не потеряете текущую аудиторию и сможете привлекать новых клиентов. Отправка пользователям пуш-уведомления позволяет оповещать о новых акциях и предложениях, выстраивать персонализированное взаимодействие с пользователем.
Выбор технологии для PWA: что нового предлагает Flutter
В этом разделе расскажем о том, какие нововведения уже доступны во Flutter, а какие только ожидают релиза. Информация актуальна на момент публикации статьи.
Сложная графика в приложениях на всех платформах
Flutter продолжает развивать собственный графический движок Impeller. Теперь доступен слой отрисовки, благодаря которому разработчики получают ускоренную графику. Так можно достичь единообразия приложений на всех устройствах.
Impeller рендерит интерфейс иначе, и это заметно уже сейчас. Исчезли некоторые классические проблемы Skia: зазоры между UI‑элементами, которые находятся близко друг к другу. Раньше это часто выражалось в виде белых полосок на экране.
Что это даст вашему приложению? Impeller обеспечивает идеально гладкую работу приложений со сложной графикой. Он способен заметно улучшить производительность в определённых сценариях. Теперь у Flutter еще больше возможностей для графического и визуального оформления.
Статус: доступно для использования с небольшими ограничениями.
Новые визуальные эффекты
Дополнительные визуальные эффекты станут доступны благодаря шейдерам — специальным программам для отрисовки графики, которые теперь поддерживает Flutter. Они нивелируют пропуск кадров в рантайме. Кроссплатформа бесшовно интегрирует новые возможности с иерархией виджетов.
Нововведения доступны не только на мобильных: в веб-версиях можно реализовать всё то же самое. Одна и та же кодовая база обеспечивает работу интерфейсов как на iOS и Android, так и в браузере.
Что это даст вашему приложению? Теперь Flutter поддерживает пиксельные шейдеры в веб, а значит, уже можно применять новые визуальные эффекты.
Статус: доступно для использования.
Улучшение интерфейса с 3D графикой
Во Flutter можно будет импортировать модели, созданные в Blender — специальной программе для создания трёхмерной графики. Кроме того, каждая итерация работы с объектом будет отображаться в реальном времени, что позволит видеть результат в приложении.
Многие считают, что 3D-графика в мобильных приложениях нужна только для игр. Но это не так: технология используется и в обычных приложениях для улучшения интерфейса и повышения удобства. Например, 3D-модели помогут при создании дополненной реальности, визуализации интерьеров и экстерьеров, создании трёхмерных диаграмм и графиков.
Что это даст вашему приложению? Возможность интегрировать 3D в другие интерфейсы на Flutter и сделать контент приложения более современным и уникальным.
Статус: скоро появится во Flutter.
Бесшовная интеграция со всеми платформами
Для перевода приложения в веб, Flutter можно использовать как компонент, встроенный в более сложное приложение. Бывает, что приложениям нужно обратиться к системным API или коду, написанному на другом языке. Чтобы сделать это взаимодействие бесшовным, во Flutter скоро появится интеграция с веб и мобильными платформами.
В концептуальном демо, которое выпустили разработчики Flutter, представлено простое приложение, встроенное в веб‑страницу на HTML.
С помощью HTML-кнопки и JavaScript можно вносить изменения в состояние Flutter и наоборот.
Тенденция на бесшовность нас однозначно радует. Уже сейчас мы пользуемся FFIgen и JNIgen (специальными библиотеками и генераторами) — это то, что помогает нам уже сейчас. Очень радует, что Flutter целенаправленно развивается из состояния «этим можно пользоваться» в состояние «этим хочется пользоваться».
Что это даст вашему приложению? Много новых способов добавлять интерактивные элементы в уже существующее приложение.
Статус: скоро появится во Flutter.
Наш опыт использования. Мы протестировали возможности Flutter Web на создании прототипа необанка. Концепт отражает возможности платформы: создание универсального приложения для веба, десктопа и мобильных. Подробнее почитать о кейсе можно тут.
Изучите подробнее концепт по ссылке: онлайн-банк на Flutter
Как перевести мобильное PWA-приложение на Flutter: роадмап
Flutter сейчас обладает всеми возможностями, чтобы сделать переход из мобайла на PWA максимально быстрым и бесшовным. Для того, чтобы показать, как осуществляется такой проект, мы составили роадмап.
- Разрабатываем PWA приложение на Flutter. Через 2 месяца запускаем версию для тестирования внутри проекта, а через 4 — версию с базовой функциональностью. Её уже можно показывать клиентам.
- Дорабатываем Flutter-приложение, на это уйдёт примерно 10 месяцев. На этом этапе в нём уже будет вся функциональность, что и в нативной версии. После этого можно заменить существующее нативное приложение на кроссплатформенное на Flutter.
- Параллельно разрабатываем версию приложения для десктопа на той же кодовой базе, что и мобильные — Flutter это позволяет.
- Передаем проект инхаус или остаёмся на поддержке и развитии. Как мы бесшовно передаем проекты в инхаус-команду можно почитать в этой статье.
Многие коммерческие компании и банки остались без доступов в сторы. Вариантов выхода из ситуации было несколько: кто-то быстро заказывал приложения-зеркала, на которые нужно такой же бюджет, как и на основное, а за скорость, скорее всего, ещё и нужно было доплатить. Второй вариант — создание прогрессивного веб-приложения. Однако и тут ожидали подводные камни: все они сводились к урезанным функциям на платформе iOS. Теперь же, с выходом iOS 16.4, причин не выбрать PWA — всё меньше. Для владельцев iPhone будут доступны такие же функции PWA приложений, как и для Android.
Вы в блоге Surf, с 2011 года мы разрабатываем мобильные и веб-решения для бизнеса. Если хотите заказать нам разработку универсального приложения на Flutter и сэкономить 60% бюджета, пишите на [email protected].
Рекомендуем почитать:
✅ Как создать универсальное приложение для iOS, Android, веба, десктопа и сэкономить 60% бюджета
Можете привести примеры, при каких сценариях импеллер улучшит производительность в приложениях со сложной графикой? Было бы очень интересно узнать, увидеть.
Пример привести несложно, потому что Impeller улучшает производительность интерфейсов вообще во всех сценариях, по нашему опыту экспериментов с ним. Анимации, переходы, скролл – всё становится более плавным. А что касается 3D, то для Impeller это вообще уникальная особенность, которая до его появления была практически нереализуема во Flutter.
Стоит оговориться, что Impeller пока превью для разработчиков, поэтому реальный проект прямо сейчас с ним собрать ещё нельзя. Но совсем скоро уже будет можно.
Но уже сейчас можно скачать на обе платформы приложение Wonderous и оценить его производительность. Оно работает на Impeller.
Не очень понятно, зачем Флаттер встраивать в существующее приложение. Натив же, вроде, со всем вполне справляется. У вас были такие кейсы?
Не совсем так. Мы не "встраиваем" Flutter в существующее приложение, а переводим (при такой необходимости) нативное – на Flutter. Иногда это обусловлено тем, что проект хочет развиваться в вебе, а с Flutter это сделать легче, переведя весь проект на него. Наличие единой кодовой базы – важное преимущество. Один и тот же код используется на обоих платформах (Android и iOS) и для веба. Подробнее о том, как тот или иной проект развивался и с чем у нам приходил, вы можете прочитать в наших кейсах: https://surf.ru/cases/