TypeScript クライアント SDK

FlagshipClientProvider は、ブラウザーアプリケーション向けの OpenFeature web provider インターフェイスを実装します。初期化時に指定したフラグ値を事前取得し、メモリ内キャッシュから同期的に評価します。

フラグ値への同期アクセスが必要なクライアントサイドレンダリングに適しています。

prefetchFlags

prefetchFlags は必須の配列です。プロバイダーは初期化時と、コンテキストが変わるたびに、ここに列挙したフラグキーを取得します。同期評価できるのはこの配列にあるフラグだけです。含まれないフラグキーは、解決時に FLAG_NOT_FOUND エラーになります。

取得の動き:

初期化時 — prefetchFlags のフラグを並列で取得し、メモリ内キャッシュに保存します。すべての取得が終わると、プロバイダーは READY になります（個別の失敗は致命的ではありません）。
コンテキスト変更時 — キャッシュを無効化し、新しいコンテキスト向けにすべてのフラグを再取得します。これは OpenFeature web SDK が使う static context paradigm ↗ の要件です。コンテキストはグローバルに設定され、変わったときはプロバイダーが再評価することが想定されています。
解決時 — 評価はキャッシュから同期的に返します。getBooleanValue や getStringValue などの呼び出しでは、ネットワークリクエストは発生しません。

セットアップ

次の例では、事前取得するフラグを指定してプロバイダーを初期化し、ブラウザーアプリケーションで評価します。

import { OpenFeature } from "@openfeature/web-sdk";
import { FlagshipClientProvider } from "@cloudflare/flagship/web";

await OpenFeature.setProviderAndWait(
	new FlagshipClientProvider({
		appId: "<APP_ID>",
		accountId: "<ACCOUNT_ID>",
		authToken: "<API_TOKEN>",
		prefetchFlags: ["promo-banner", "dark-mode", "max-uploads"],
	}),
);

// Set evaluation context globally. The provider re-fetches all prefetchFlags
// whenever the context changes.
await OpenFeature.setContext({ targetingKey: "user-42", plan: "enterprise" });

const client = OpenFeature.getClient();

// Synchronous — served from the in-memory cache.
const showBanner = client.getBooleanValue("promo-banner", false);

if (showBanner) {
	document.getElementById("banner").style.display = "block";
}

import { OpenFeature } from "@openfeature/web-sdk";
import { FlagshipClientProvider } from "@cloudflare/flagship/web";

await OpenFeature.setProviderAndWait(
	new FlagshipClientProvider({
		appId: "<APP_ID>",
		accountId: "<ACCOUNT_ID>",
		authToken: "<API_TOKEN>",
		prefetchFlags: ["promo-banner", "dark-mode", "max-uploads"],
	}),
);

// Set evaluation context globally. The provider re-fetches all prefetchFlags
// whenever the context changes.
await OpenFeature.setContext({ targetingKey: "user-42", plan: "enterprise" });

const client = OpenFeature.getClient();

// Synchronous — served from the in-memory cache.
const showBanner = client.getBooleanValue("promo-banner", false);

if (showBanner) {
	document.getElementById("banner").style.display = "block";
}

設定オプション

オプション	型	必須	説明
`appId`	`string`	はい	Cloudflare ダッシュボードに表示される Flagship の app ID です。
`accountId`	`string`	はい	Cloudflare の account ID です。
`authToken`	`string`	はい	Flagship Evaluate または Flagship App Evaluate 権限を持つ Cloudflare の API トークンです。
`fetchOptions`	`RequestInit`	いいえ	HTTP リクエストに適用するカスタムの fetch オプションです。
`timeout`	`number`	いいえ	リクエストのタイムアウト（ミリ秒）。デフォルトは `5000` です。
`retries`	`number`	いいえ	一時的なエラー時の再試行回数。デフォルトは `1` で、上限は `10` です。
`retryDelay`	`number`	いいえ	再試行の間隔（ミリ秒）。デフォルトは `1000` で、上限は `30000` です。
`prefetchFlags`	`string[]`	はい	初期化時とコンテキスト変更時に取得するフラグキーです。このリストにないフラグは、評価時に `FLAG_NOT_FOUND` を返します。

クライアントプロバイダーを使う場面

ブラウザーアプリケーション、シングルページアプリケーション、その他のクライアントサイド JavaScript 環境では、クライアントプロバイダーを使います。

評価は同期的なので、レンダリングを妨げません。フラグ値は初期化時に一度取得し、評価コンテキストが変わるたびに再取得します。強制的に更新するには、OpenFeature.setContext(...) でコンテキストを更新します。