Capacitor SDKでのフローとペイウォール取得の最適化

Capacitorで確実にフローやペイウォールを取得するには、3つのポイントがあります。高速な描画、オーディエンスに合ったバリアントの返却、そしてネットワークが遅いときのグレースフルなフォールバックです。以下のルールでは、これを実現するためのタイミング、キャッシュ、フォールバックのパターンを説明します。

Tip

このルールは、adapty.activate() と adapty.identify() がすでに完了していることを前提としています。詳細はCapacitor SDKの呼び出し順序を参照してください。

ルールと注意事項

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

詳細については、ペイウォールとプロダクトの取得（fetchPolicy および loadTimeoutMs パラメータのリファレンス）とプレースメント（適切なプレースメントの選択方法）を参照してください。

アプリバンドルからファーストスクリーンのメディアを表示する

フローは画像や動画を Adapty からダウンロードします。ファーストスクリーンのメディアを即座に表示するには、アプリバンドルから配信する方法があります。既存のネイティブオンボーディングのビジュアルなど、すでに同梱しているメディアを再利用するのに最適な方法です。

Flow & Paywall Builderで、画像または動画にカスタムメディア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 を 3000〜5000 ミリ秒に設定し、タイムアウト時はフォールバックを受け入れる。
フローの表示を adapty.getProfile() の完了に依存させない。getFlow は独立して呼び出し、プロファイルの取得が遅くても UI をブロックしないようにする。