unleash proxy client js
v3.6.1
El cliente proxy JavaScript es un pequeño cliente Unleash escrito en JavaScript sin dependencias externas (excepto las API del navegador). Este cliente almacena los cambios relevantes para el usuario actual en localStorage y se sincroniza con Unleash (la API front-end de Unleash o el proxy de Unleash) en segundo plano. Debido a que los cambios se almacenan en el navegador del usuario, el cliente puede usarlos para iniciarse la próxima vez que el usuario visite la misma página web.
Este cliente espera que fetch esté disponible. Si necesita admitir navegadores más antiguos, probablemente debería utilizar el método de búsqueda de polietileno.
Este paquete no está vinculado a ningún marco, pero se puede utilizar junto con los marcos más populares, ejemplos:
npm install unleash - proxy - clientSUGERENCIA : Como SDK del lado del cliente, este SDK requiere que se conecte a un proxy de Unleash o a la API de front-end de Unleash. Consulte la sección de opciones de conexión para obtener más información.
Configura el cliente según tus necesidades. El siguiente ejemplo proporciona solo las opciones requeridas. Consulte la sección sobre opciones disponibles para ver la lista completa.
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 ( ) ; Para conectar este SDK a la API de front-end de su instancia de Unleash, use la URL de la API de front-end de su instancia de Unleash ( <unleash-url>/api/frontend ) como parámetro url . Para el parámetro clientKey , utilice un token FRONTEND generado a partir de su instancia de Unleash. Consulte la guía sobre cómo crear tokens API para conocer los pasos necesarios.
Para conectar este SDK al proxy Unleash, utilice la URL del proxy y una clave de cliente proxy. La sección de configuración de los documentos del proxy de Unleash contiene más información sobre cómo configurar claves de cliente para su proxy.
Debe esperar los eventos ready o initialized del cliente antes de comenzar a trabajar con él. Antes de que esté listo, es posible que el cliente no informe el estado correcto de sus funciones.
unleash . on ( 'ready' , ( ) => {
if ( unleash . isEnabled ( 'proxy.demo' ) ) {
console . log ( 'proxy.demo is enabled' ) ;
} else {
console . log ( 'proxy.demo is disabled' ) ;
}
} ) ;La diferencia entre los eventos se describe en la sección de eventos disponibles.
Una vez que el cliente esté listo, puede comenzar a verificar las funciones de su aplicación. Utilice el método isEnabled para verificar el estado de cualquier característica que desee:
unleash . isEnabled ( 'proxy.demo' ) ; Puede utilizar el método getVariant para obtener la variante de una característica habilitada que tiene variantes . Si la función está deshabilitada o si no tiene variantes, recuperará la variante deshabilitada .
const variant = unleash . getVariant ( 'proxy.demo' ) ;
if ( variant . name === 'blue' ) {
// something with variant blue...
} El contexto Unleash se utiliza para evaluar características frente a los atributos del usuario actual. Para actualizar y configurar el contexto Unleash en este SDK, use los métodos updateContext , setContextField y removeContextField .
El contexto que establezca en su aplicación se pasará al proxy Unleash o a la API de front-end como parámetros de consulta para la evaluación de funciones.
El método updateContext reemplazará la totalidad (parte mutable) del contexto Unleash con los datos que usted pase.
El método setContextField solo actúa sobre la propiedad que elijas. No afecta ninguna otra propiedad del contexto Unleash.
unleash . updateContext ( { userId : '1233' } ) ;
unleash . setContextField ( 'userId' , '4141' ) ; El método removeContextField solo actúa sobre la propiedad que elijas. No afecta ninguna otra propiedad del contexto Unleash.
unleash . updateContext ( { userId : '1233' , sessionId : 'sessionNotAffected' } ) ;
unleash . removeContextField ( 'userId' ) ;El SDK de Unleash tiene las siguientes opciones:
| opción | requerido | por defecto | descripción |
|---|---|---|---|
| URL | Sí | n / A | La URL de Unleash Proxy a la que conectarse. Por ejemplo: https://examples.com/proxy |
| clavecliente | Sí | n / A | El secreto de Unleash Proxy que se utilizará |
| nombre de la aplicación | Sí | n / A | El nombre de la aplicación que utiliza este SDK. Se utilizará como parte de las métricas enviadas a Unleash Proxy. También será parte del Contexto Unleash. |
| contexto | No | {} | El contexto inicial de Unleash. Esto se utilizará como contexto inicial para todas las evaluaciones de alternancia de funciones. Las opciones appName y environment se completarán automáticamente con los valores que pase para esas opciones. |
| intervalo de actualización | No | 30 | Con qué frecuencia, en segundos, el SDK debe verificar la configuración de alternancia actualizada. Si se establece en 0, se desactivará la búsqueda de actualizaciones. |
| desactivarActualizar | No | false | Si se establece en verdadero, el cliente no comprobará la configuración de alternancia actualizada. |
| Intervalo de métricas | No | 60 | Con qué frecuencia, en segundos, el SDK debe enviar métricas de uso a Unleash Proxy. Se iniciará después del informe de métricas inicial, que se envía después del metricsIntervalInitial configurado |
| métricasIntervaloInicial | No | 2 | Cuánto tiempo debe esperar el SDK para que el primer informe de métricas se envíe a la API de Unleash. Si desea deshabilitar la llamada de métricas iniciales, puede configurarla en 0. |
| desactivarMetricas | No | false | Establezca esta opción en true si desea deshabilitar las métricas de uso |
| proveedor de almacenamiento | No | LocalStorageProvider en el navegador, InMemoryStorageProvider en caso contrario | Le permite inyectar un storeProvider personalizado |
| buscar | No | window.fetch o fetch global | Le permite anular la implementación de recuperación que se utilizará. Útil en entornos Node.js donde puedes inyectar node-fetch |
| crearAbortController | No | () => new AbortController() | Le permite anular la creación predeterminada AbortController . Se utiliza para cancelar solicitudes con contexto desactualizado. Configúrelo en () => null si no desea manejarlo. |
| oreja | No | [] | Le permite iniciar la configuración de alternancia de funciones en caché. |
| anulación de arranque | No | true | ¿El programa de arranque debe anular automáticamente los datos almacenados en caché en el almacenamiento local? Sólo se utilizará si bootstrap no es una matriz vacía. |
| nombre del encabezado | No | Authorization | Qué encabezado debe usar el SDK para autorizar con Unleash/Unleash Proxy. Al encabezado se le dará la clientKey como valor. |
| encabezados personalizados | No | {} | Encabezados adicionales para usar al realizar solicitudes HTTP al proxy Unleash. En caso de colisiones de nombres con los encabezados predeterminados, se utilizará el valor customHeaders si no es null o undefined . Se ignorarán los valores customHeaders que sean null o undefined . |
| impresiónDatosTodos | No | false | Le permite activar eventos de "impresión" para todas las invocaciones getToggle y getVariant . Esto es particularmente útil para alternar funciones "deshabilitadas" que no son visibles para los SDK de interfaz. |
| ambiente | No | default | Establece la opción environment del contexto Unleash. Esto no afecta el entorno Unleash del SDK. |
| utilizar solicitudes POST | No | false | Configura el cliente para utilizar solicitudes POST en lugar de GET al solicitar funciones habilitadas. Esto resulta útil cuando se pasa información confidencial (como el correo electrónico del usuario, cuando se utiliza como ID de usuario) en el contexto para evitar que se filtre en la URL. NOTA: Las solicitudes de publicación no son compatibles con la API de interfaz integrada en Unleash. |
| experimental | No | {} | Habilitar la experimentación opcional. togglesStorageTTL : cuánto tiempo (tiempo de vida), en segundos, los cambios en el almacenamiento se consideran válidos y no deben recuperarse al inicio. Si se establece en 0, se deshabilitará la verificación de vencimiento y se considerará siempre vencido. |
El cliente también es un emisor de eventos. Esto significa que su código puede suscribirse a las actualizaciones del cliente. Esta es una forma sencilla de actualizar una aplicación de una sola página al alternar actualizaciones de estado.
unleash . on ( 'update' , ( ) => {
const myToggle = unleash . isEnabled ( 'proxy.demo' ) ;
//do something useful
} ) ; ¡PD! Recuerde que siempre debe registrar a sus oyentes de eventos antes de llamar a
unleash.start(). Si los registra después de haber iniciado el SDK, corre el riesgo de perder eventos importantes.
Puede proporcionar una identificación de sesión personalizada a través del "contexto". Si no proporciona un ID de sesión, este SDK creará un ID de sesión aleatorio, que también se almacenará en el almacenamiento proporcionado (almacenamiento local). Tener siempre disponible un ID de sesión coherente garantiza que incluso los usuarios "anónimos" obtengan una experiencia coherente cuando se evalúen los cambios de funciones, en combinación con una implementación gradual (basada en porcentajes).
Puede detener el cliente Unleash llamando al método stop . Una vez que se haya detenido el cliente, ya no buscará actualizaciones ni enviará métricas al servidor.
Un cliente detenido se puede reiniciar.
unleash . stop ( )Este SDK puede funcionar con el almacenamiento React Native @react-native-async-storage/async-storage o reaccionar-native-shared-preferences y muchos más para alternar funciones de copia de seguridad localmente. Esto es útil para iniciar el SDK la próxima vez que el usuario regrese a su aplicación.
Puede proporcionar su propia implementación de almacenamiento.
Ejemplos:
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 ;
}
} ,
} ) ; Este SDK también se puede utilizar en aplicaciones node.js (desde v1.4.0). Tenga en cuenta que deberá proporcionar una implementación de "búsqueda" válida. Desde este paquete solo se exportan módulos 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 ) ;index.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 > Ahora es posible iniciar el SDK con su propia configuración de alternancia de funciones cuando no desea realizar una llamada API.
Esto también es útil si necesita que los conmutadores estén en un estado determinado inmediatamente después de inicializar el SDK.
Agregue un atributo bootstrap cuando cree un nuevo UnleashClient .
También hay un atributo bootstrapOverride que por defecto es 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
} ) ; NOTAS:bootstrapOverride es true (de forma predeterminada), cualquier dato almacenado en caché local se anulará con el bootstrap especificado.
Si bootstrapOverride es false los datos almacenados en caché local no se anularán a menos que el caché local esté vacío.
Puede optar por no participar en el mecanismo de actualización automática del indicador de función Unleash y en la actualización de métricas configurando las opciones de refreshInterval y/o metricsInterval en 0 . En este caso, es su responsabilidad llamar a los métodos updateToggles y/o sendMetrics . Este enfoque es útil en entornos que no admiten la API setInterval , como los trabajadores de servicios.
