← Cloudflare Flagship / flagship / sdk

TypeScript Client SDK

FlagshipClientProvider реализует интерфейс веб-провайдера OpenFeature для приложений в браузере. Он заранее загружает заявленный набор значений флагов при инициализации и синхронно разрешает их из кэша в памяти.

Благодаря этому поставщик подходит для клиентского рендеринга, где требуется синхронный доступ к значениям флагов.

prefetchFlags это обязательный массив ключей флагов, которые провайдер загружает при инициализации и при каждом изменении контекста. Только флаги, перечисленные в этом массиве, доступны для синхронной оценки: любой не включенный в него ключ флага возвращает FLAG_NOT_FOUND ошибку во время разрешения значения.

Поведение загрузки:

• При инициализации : все флаги в prefetchFlags загружаются параллельно и сохраняются в кэше в памяти. Провайдер переходит в состояние READY после завершения всех загрузок (отдельные сбои не являются критическими).
• При изменении контекста : кэш сбрасывается, и все флаги загружаются заново для нового контекста. Это требуется в соответствии с парадигма статического контекста ↗ используемый OpenFeature Web SDK, где контекст задаётся глобально, а провайдеры должны заново оценивать флаги при его изменении.
• В момент разрешения : оценки выполняются синхронно из кэша. Сетевой запрос не выполняется во время 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";
}

Используйте клиентский поставщик в браузерных приложениях, одностраничных приложениях (SPA) или в любой клиентской среде JavaScript.

Оценка выполняется синхронно, поэтому она не блокирует рендеринг. Значения флагов загружаются один раз при инициализации и повторно при каждом изменении контекста оценки. Чтобы принудительно обновить значения, измените контекст через OpenFeature.setContext(...).