JavaScript 代理客户端是一个用 JavaScript 编写的小型 Unleash 客户端,没有任何外部依赖项(浏览器 API 除外)。该客户端在localStorage
中存储与当前用户相关的切换,并在后台与 Unleash(Unleash 前端 API或Unleash 代理)同步。由于切换存储在用户的浏览器中,因此客户端可以在用户下次访问同一网页时使用它们来引导自身。
该客户端期望fetch
可用。如果您需要支持旧版浏览器,您可能应该使用 fetch polyfill。
该包不绑定任何框架,但可以与最流行的框架一起使用,示例:
npm install unleash - proxy - client
提示:作为客户端 SDK,此 SDK 要求您连接到 Unleash 代理或 Unleash 前端 API。有关详细信息,请参阅连接选项部分。
根据您的需要配置客户端。以下示例仅提供必需的选项。有关完整列表,请参阅有关可用选项的部分。
import { UnleashClient } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://<your-unleash-instance>/api/frontend' ,
clientKey : '<your-client-side-token>' ,
appName : 'my-webapp' ,
} ) ;
// Start the background polling
unleash . start ( ) ;
要将此 SDK 连接到 Unleash 实例的前端 API,请使用 Unleash 实例的前端 API ( <unleash-url>/api/frontend
) 的 URL 作为url
参数。对于clientKey
参数,请使用从 Unleash 实例生成的FRONTEND
令牌。请参阅如何创建 API 令牌指南以了解必要的步骤。
要将此 SDK 连接到 Unleash 代理,请使用代理的 URL 和代理客户端密钥。 Unleash 代理文档的配置部分包含有关如何为代理配置客户端密钥的更多信息。
在开始使用客户端之前,您应该等待客户端的ready
或initialized
事件。在准备就绪之前,客户端可能不会报告您的功能的正确状态。
unleash . on ( 'ready' , ( ) => {
if ( unleash . isEnabled ( 'proxy.demo' ) ) {
console . log ( 'proxy.demo is enabled' ) ;
} else {
console . log ( 'proxy.demo is disabled' ) ;
}
} ) ;
可用事件部分描述了事件之间的差异。
一旦客户端准备就绪,您就可以开始检查应用程序中的功能。使用isEnabled
方法检查您想要的任何功能的状态:
unleash . isEnabled ( 'proxy.demo' ) ;
您可以使用getVariant
方法获取已启用功能的变体,该功能具有变量。如果该功能被禁用或者没有变体,那么您将取回被禁用的变体
const variant = unleash . getVariant ( 'proxy.demo' ) ;
if ( variant . name === 'blue' ) {
// something with variant blue...
}
Unleash 上下文用于根据当前用户的属性评估功能。要更新和配置此 SDK 中的 Unleash 上下文,请使用updateContext
、 setContextField
和removeContextField
方法。
您在应用程序中设置的上下文将作为功能评估的查询参数传递到 Unleash 代理或前端 API。
updateContext
方法将使用您传入的数据替换 Unleash 上下文的整个(可变部分)。
setContextField
方法仅作用于您选择的属性。它不会影响 Unleash 上下文的任何其他属性。
unleash . updateContext ( { userId : '1233' } ) ;
unleash . setContextField ( 'userId' , '4141' ) ;
removeContextField
方法仅作用于您选择的属性。它不会影响 Unleash 上下文的任何其他属性。
unleash . updateContext ( { userId : '1233' , sessionId : 'sessionNotAffected' } ) ;
unleash . removeContextField ( 'userId' ) ;
Unleash SDK 采用以下选项:
选项 | 必需的 | 默认 | 描述 |
---|---|---|---|
网址 | 是的 | 不适用 | 要连接的 Unleash 代理 URL。例如:https: https://examples.com/proxy |
客户端密钥 | 是的 | 不适用 | 要使用的 Unleash 代理密钥 |
应用程序名称 | 是的 | 不适用 | 使用此 SDK 的应用程序的名称。将用作发送到 Unleash Proxy 的指标的一部分。也将成为 Unleash Context 的一部分。 |
语境 | 不 | {} | 初始释放上下文。这将用作所有功能切换评估的初始上下文。 appName 和environment 选项将自动填充您为这些选项传递的值。 |
刷新间隔 | 不 | 30 | SDK 应检查更新的切换配置的频率(以秒为单位)。如果设置为 0 将禁用检查更新 |
禁用刷新 | 不 | false | 如果设置为 true,客户端将不会检查更新的切换配置 |
指标间隔 | 不 | 60 | SDK 应将使用指标发送回 Unleash Proxy 的频率(以秒为单位)。它将在初始指标报告之后启动,该报告是在配置的metricsIntervalInitial 之后发送的 |
指标间隔初始值 | 不 | 2 | SDK 应等待第一个指标报告返回 Unleash API 的时间。如果您想禁用初始指标调用,可以将其设置为 0。 |
禁用指标 | 不 | false | 如果您想禁用使用指标,请将此选项设置为true |
存储提供者 | 不 | 浏览器中的LocalStorageProvider ,否则为InMemoryStorageProvider | 允许您注入自定义 storeProvider |
拿来 | 不 | window.fetch 或全局fetch | 允许您覆盖要使用的获取实现。在可以注入node-fetch 的 Node.js 环境中很有用 |
创建AbortController | 不 | () => new AbortController() | 允许您覆盖默认的AbortController 创建。用于取消上下文过时的请求。如果您不想处理它,请将其设置为() => null 。 |
引导程序 | 不 | [] | 允许您引导缓存的功能切换配置。 |
引导覆盖 | 不 | true | 引导程序是否应该自动覆盖本地存储中的缓存数据。仅当 bootstrap 不是空数组时才会使用。 |
标头名称 | 不 | Authorization | SDK 应使用哪个标头来通过 Unleash / Unleash 代理进行授权。标头将被赋予clientKey 作为其值。 |
自定义标题 | 不 | {} | 向 Unleash 代理发出 HTTP 请求时要使用的其他标头。如果与默认标头发生名称冲突,则将使用customHeaders 值(如果它不为null 或undefined 。 null 或undefined customHeaders 值将被忽略。 |
印象数据全部 | 不 | false | 允许您为所有getToggle 和getVariant 调用触发“impression”事件。这对于前端 SDK 不可见的“禁用”功能切换特别有用。 |
环境 | 不 | default | 设置 Unleash 上下文的environment 选项。这不会影响 SDK 的 Unleash 环境。 |
使用POST请求 | 不 | false | 将客户端配置为在请求启用的功能时使用 POST 请求而不是 GET。当敏感信息(如用户电子邮件,用作用户 ID 时)在上下文中传递时,这非常有用,以避免在 URL 中泄漏该信息。注意:Unleash 内置的前端 API 不支持 Post 请求。 |
实验性的 | 不 | {} | 启用可选实验。 togglesStorageTTL :存储中的切换被认为有效且不应在启动时获取的时间(生存时间)(以秒为单位)。如果设置为 0 将禁用过期检查并被视为始终过期。 |
客户端也是事件发射器。这意味着您的代码可以订阅来自客户端的更新。这是在切换状态更新时更新单页应用程序的一种巧妙方法。
unleash . on ( 'update' , ( ) => {
const myToggle = unleash . isEnabled ( 'proxy.demo' ) ;
//do something useful
} ) ;
附言!请记住,您应该始终在调用
unleash.start()
之前注册事件侦听器。如果您在启动 SDK 后注册它们,您将面临丢失重要事件的风险。
您可以通过“上下文”提供自定义会话 ID。如果您不提供 sessionId,此 SDK 将创建一个随机会话 ID,该 ID 也将存储在提供的存储(本地存储)中。通过始终保持一致的 sessionId 可用,可确保在评估功能切换时,即使是“匿名”用户也能获得一致的体验,并结合逐步(基于百分比)的推出。
您可以通过调用stop
方法来停止 Unleash 客户端。一旦客户端停止,它将不再检查更新或向服务器发送指标。
已停止的客户端可以重新启动。
unleash . stop ( )
该 SDK 可以与 React Native 存储 @react-native-async-storage/async-storage 或 react-native-shared-preferences 以及更多其他功能一起使用,以在本地备份功能切换。这对于用户下次返回应用程序时引导 SDK 非常有用。
您可以提供自己的存储实现。
示例:
import SharedPreferences from 'react-native-shared-preferences' ;
import { UnleashClient } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://eu.unleash-hosted.com/hosted/proxy' ,
clientKey : 'your-proxy-key' ,
appName : 'my-webapp' ,
storageProvider : {
save : ( name : string , data : any ) => SharedPreferences . setItem ( name , data ) ,
get : ( name : string ) => SharedPreferences . getItem ( name , ( val ) => val )
} ,
} ) ;
import AsyncStorage from '@react-native-async-storage/async-storage' ;
import { UnleashClient } from 'unleash-proxy-client' ;
const PREFIX = 'unleash:repository' ;
const unleash = new UnleashClient ( {
url : 'https://eu.unleash-hosted.com/hosted/proxy' ,
clientKey : 'your-proxy-key' ,
appName : 'my-webapp' ,
storageProvider : {
save : ( name : string , data : any ) => {
const repo = JSON . stringify ( data ) ;
const key = ` ${ PREFIX } : ${ name } ` ;
return AsyncStorage . setItem ( key , repo ) ;
} ,
get : ( name : string ) => {
const key = ` ${ PREFIX } : ${ name } ` ;
const data = await AsyncStorage . getItem ( key ) ;
return data ? JSON . parse ( data ) : undefined ;
}
} ,
} ) ;
该 SDK 还可以在 Node.js 应用程序中使用(从 v1.4.0 开始)。请注意,您需要提供有效的“获取”实现。仅 ECMAScript 模块从此包中导出。
import fetch from 'node-fetch' ;
import { UnleashClient , InMemoryStorageProvider } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://app.unleash-hosted.com/demo/proxy' ,
clientKey : 'proxy-123' ,
appName : 'nodejs-proxy' ,
storageProvider : new InMemoryStorageProvider ( ) ,
fetch ,
} ) ;
await unleash . start ( ) ;
const isEnabled = unleash . isEnabled ( 'proxy.demo' ) ;
console . log ( isEnabled ) ;
索引.mjs
< html >
< head >
< script src =" https://unpkg.com/unleash-proxy-client@latest/build/main.min.js " type =" text/javascript " > </ script >
< script type =" text/javascript " >
var config = { url : 'https://app.unleash-hosted.com/demo/proxy' , clientKey : 'proxy-123' , appName : 'web' } ;
var client = new unleash . UnleashClient ( config ) ;
client . updateContext ( { userId : '1233' } )
client . on ( 'update' , ( ) => {
console . log ( client . isEnabled ( 'proxy.demo' ) ) ;
} ) ;
client . start ( ) ;
</ script >
</ head >
</ html >
现在,当您不想进行 API 调用时,可以使用您自己的功能切换配置来引导 SDK。
如果您需要在初始化 SDK 后立即使切换处于某种状态,这也很有用。
创建新的UnleashClient
时添加bootstrap
属性。
还有一个bootstrapOverride
属性,默认情况下为true
。
import { UnleashClient } from 'unleash-proxy-client' ;
const unleash = new UnleashClient ( {
url : 'https://app.unleash-hosted.com/demo/proxy' ,
clientKey : 'proxy-123' ,
appName : 'nodejs-proxy' ,
bootstrap : [ {
"enabled" : true ,
"name" : "demoApp.step4" ,
"variant" : {
"enabled" : true ,
"name" : "blue" ,
"feature_enabled" : true ,
}
} ] ,
bootstrapOverride : false
} ) ;
笔记:bootstrapOverride
为true
(默认情况下),则任何本地缓存的数据都将被指定的引导程序覆盖。
如果bootstrapOverride
为false
则不会覆盖任何本地缓存数据,除非本地缓存为空。
您可以通过将refreshInterval
和/或metricsInterval
选项设置为0
来选择退出Unleash功能标志自动刷新机制和指标更新。在这种情况下,您有责任调用updateToggles
和/或sendMetrics
方法。此方法在不支持setInterval
API 的环境中非常有用,例如服务工作线程。