Optimiser la récupération des flows et paywalls dans le SDK Capacitor

Une récupération fiable d’un flow ou d’un paywall avec Capacitor repose sur trois principes : un affichage rapide, le renvoi de la variante ciblée par audience, et un fallback élégant en cas de réseau lent. Les règles ci-dessous couvrent le timing, la mise en cache et les patterns de fallback pour y parvenir.

Tip

Ces règles supposent que adapty.activate() et adapty.identify() ont déjà été résolus. Consultez Ordre d’appel dans le SDK Capacitor.

Règles et pièges

À faire	À ne pas faire	Pourquoi
Récupérez le placement que vous êtes sur le point d’afficher.	Prérécupérez tous les placements en parallèle au lancement.	La prérécupération en masse bloque le thread principal et provoque un écran noir pendant le burst.
Appelez `getFlow` après que l’attribution a eu le temps de se résoudre — par exemple, 1 à 2 secondes après `activate` ou après le déclenchement du listener `onLatestProfileLoad`.	Appelez `getFlow` au lancement de l’app dans `App.tsx`.	L’attribution n’est pas encore arrivée. Le flow se résout sur l’audience par défaut et contourne silencieusement les segments et la personnalisation ASA.
Définissez un `loadTimeoutMs` et configurez un paywall de secours pour chaque placement.	Attendez `getFlow` indéfiniment.	Sans délai d’expiration, les utilisateurs avec une mauvaise connexion voient un écran vide jusqu’à ce que le réseau réponde — ou ferment l’app.

Consultez Récupérer les paywalls et les produits pour la référence des paramètres fetchPolicy et loadTimeoutMs, et Placements pour choisir le bon placement.

Afficher les médias du premier écran depuis le bundle de l’application

Un flow télécharge ses images et vidéos depuis Adapty. Pour afficher instantanément les médias du premier écran, servez-les depuis le bundle de l’application. C’est un bon moyen de réutiliser des médias déjà inclus dans votre app, comme les visuels d’un onboarding natif existant.

Dans le Flow & Paywall Builder, définissez un identifiant de média personnalisé sur l’image ou la vidéo. Le fichier que vous y importez sert de secours.
Ajoutez le fichier aux projets natifs : le bundle de l’app iOS et le dossier assets d’Android.
Lors de la création de la vue flow, transmettez le fichier embarqué pour cet identifiant dans 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 });

Les fichiers intégrés augmentent le poids de téléchargement de votre app — n’intégrez que les médias affichés en premier.

Les médias non intégrés s’affichent quand même immédiatement : la mise en page du flow inclut une petite copie en basse résolution de chaque image, y compris l’image fixe d’une vidéo, et l’affiche jusqu’au chargement du fichier complet.

Pour la référence complète de customAssets, voir Personnaliser les assets.

Optimiser pour une mauvaise connectivité

Pour les marchés où la connectivité est durablement mauvaise (zones rurales, transports, régions affectées par le routage) :

Définissez fetchPolicy: 'return_cache_data_else_load' sur chaque appel de récupération, sauf le tout premier.
Configurez un paywall de secours pour chaque placement dans le tableau de bord Adapty.
Définissez loadTimeoutMs entre 3 000 et 5 000 millisecondes et acceptez le paywall de secours lorsque le délai expire.
Ne conditionnez pas l’affichage d’un flow à adapty.getProfile(). Appelez getFlow de façon indépendante pour qu’un profil lent ne bloque pas l’interface.