React Native SDKでフローとペイウォールの取得を最適化する

React Nativeで信頼性の高いフローまたはペイウォールの取得を実現するには、次の3つが必要です：高速なレンダリング、オーディエンスに基づくバリアントの返却、そしてネットワークが遅い場合のグレースフルなフォールバック。以下のルールでは、これを達成するためのタイミング、キャッシュ、フォールバックパターンを説明します。

Tip

これらのルールは、adapty.activate() と adapty.identify() がすでに解決済みであることを前提としています。詳しくはReact Native SDKのコール順序をご覧ください。

ルールと注意点

これをやる	これをやらない	理由
表示しようとしているプレースメントを取得する。	起動時にすべてのプレースメントを一括プリフェッチする。	一括プリフェッチはJSスレッドをブロックし、バースト中にブラックスクリーンが発生する。
アトリビューションが解決される機会を得てから `getFlow` を取得する — たとえば、`activate` の1〜2秒後、または `onLatestProfileLoad` が発火した後。	`getFlow` をルートコンポーネントのマウント時に呼び出す。	アトリビューションがまだ反映されていない。フローはデフォルトのオーディエンスに対して解決され、セグメントやASAのパーソナライゼーションを無音でバイパスする。
`loadTimeoutMs` を設定し、すべてのプレースメントにフォールバックペイウォールを設定する。	`getFlow` を無期限に待機する。	タイムアウトがないと、接続が不安定なユーザーはネットワークが解決するまで — またはアプリを閉じるまで — 空白の画面を見ることになる。

fetchPolicy と loadTimeoutMs パラメーターのリファレンスはペイウォールとプロダクトの取得を、適切なプレースメントの選択はプレースメントをご覧ください。

アプリバンドルから最初の画面のメディアを表示する

フローは画像や動画を Adapty からダウンロードします。最初の画面のメディアを即座に表示するには、アプリバンドルから配信してください。これは、既存のネイティブオンボーディングのビジュアルなど、すでにアプリに同梱しているメディアを再利用する便利な方法です。

フローまたはペイウォールビルダーで、画像や動画にカスタムメディアIDを設定します。そこにアップロードしたファイルはフォールバックとして残ります。
ネイティブプロジェクトにファイルを追加します：iOSのアプリバンドルと、Androidのassetsフォルダです。
フロービューを作成する際、customAssetsでそのIDに対応するバンドル済みファイルを渡します：

// "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 を 3〜5 秒に設定し、タイムアウト発生時はフォールバックを受け入れる。
フローの表示を getProfile() に依存させない。getFlow を独立して呼び出すことで、プロファイルの取得が遅くても UI をブロックしないようにする。