Оптимизация загрузки флоу и пейволов в Capacitor SDK

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

Tip

Предполагается, что adapty.activate() и adapty.identify() уже выполнены. См. Порядок вызовов в Capacitor SDK.

Правила и подводные камни

Делайте так	Не делайте так	Почему
Загружайте плейсмент непосредственно перед показом.	Параллельно загружайте все плейсменты при запуске.	Массовая предзагрузка блокирует главный поток и вызывает чёрный экран в момент пика нагрузки.
Вызывайте `getFlow` после того, как атрибуция успела разрешиться — например, через 1–2 секунды после `activate` или после срабатывания слушателя `onLatestProfileLoad`.	Вызывайте `getFlow` при запуске приложения в `App.tsx`.	Атрибуция ещё не получена. Флоу разрешается по аудитории по умолчанию и незаметно обходит сегменты и персонализацию ASA.
Задавайте `loadTimeoutMs` и настраивайте резервный пейвол для каждого плейсмента.	Ждите ответа `getFlow` бесконечно.	Без таймаута пользователи с нестабильным соединением видят пустой экран до тех пор, пока сеть не ответит — или закрывают приложение.

Подробнее о параметрах fetchPolicy и loadTimeoutMs см. в разделе Получение пейволов и продуктов, а о выборе подходящего плейсмента — в разделе Плейсменты.

Показ медиафайлов первого экрана из бандла приложения

Флоу загружает изображения и видео с серверов Adapty. Чтобы медиафайлы первого экрана отображались мгновенно, подключите их из бандла приложения. Это удобно, если вы уже поставляете нужные материалы вместе с приложением — например, визуалы существующего нативного онбординга.

В Flow & Paywall Builder установите пользовательский медиа-ID для изображения или видео. Загруженный там файл останется резервным.
Добавьте файл в нативные проекты: в бандл iOS-приложения и в папку assets Android.
При создании представления флоу передайте локальный файл для этого ID в customAssets:


// "welcome_video" is the custom media ID set in the Flow & Paywall Builder
const bundledAssets: Record<string, AdaptyCustomAsset> = {
  'welcome_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'welcome.mp4' },
      android: { relativeAssetPath: 'videos/welcome.mp4' },
    },
  },
};

const view = await createFlowView(flow, { customAssets: bundledAssets });

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

Медиафайлы, которые вы не бандлируете, всё равно отображаются мгновенно: в макет флоу встроены уменьшенные копии каждого изображения с низким разрешением (в том числе стоп-кадр видео), которые показываются до загрузки полноразмерного файла.

Полное описание customAssets см. в разделе Настройка ресурсов.

Настройте приложение для плохого соединения

Для рынков с постоянно плохим соединением (сельские районы, транспорт, регионы с проблемами маршрутизации):

Устанавливайте fetchPolicy: 'return_cache_data_else_load' для каждого запроса, кроме самого первого.
Настройте резервный пейвол для каждого плейсмента в дашборде Adapty.
Установите loadTimeoutMs в диапазоне 3000–5000 миллисекунд и принимайте резервный пейвол при срабатывании таймаута.
Не блокируйте отображение флоу на ожидании adapty.getProfile(). Вызывайте getFlow независимо, чтобы медленная загрузка профиля не блокировала UI.