Der JavaScript-Proxy-Client ist ein kleiner, in JavaScript geschriebener Unleash-Client ohne externe Abhängigkeiten (außer von Browser-APIs). Dieser Client speichert für den aktuellen Benutzer relevante Umschaltungen in localStorage
und synchronisiert sich im Hintergrund mit Unleash (der Unleash-Front-End-API oder dem Unleash-Proxy). Da Umschaltungen im Browser des Benutzers gespeichert werden, kann der Client sie verwenden, um sich selbst zu booten, wenn der Benutzer das nächste Mal dieselbe Webseite besucht.
Dieser Client erwartet, dass fetch
verfügbar ist. Wenn Sie ältere Browser unterstützen müssen, sollten Sie wahrscheinlich das Fetch-Polyfill verwenden.
Dieses Paket ist an kein Framework gebunden, kann aber zusammen mit den gängigsten Frameworks verwendet werden, Beispiele:
npm install unleash - proxy - client
TIPP : Da es sich um ein clientseitiges SDK handelt, müssen Sie für dieses SDK entweder eine Verbindung zu einem Unleash-Proxy oder zur Unleash-Front-End-API herstellen. Weitere Informationen finden Sie im Abschnitt „Verbindungsoptionen“.
Konfigurieren Sie den Client entsprechend Ihren Bedürfnissen. Das folgende Beispiel stellt nur die erforderlichen Optionen bereit. Die vollständige Liste finden Sie im Abschnitt zu den verfügbaren Optionen.
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 ( ) ;
Um dieses SDK mit der Front-End-API Ihrer Unleash-Instanz zu verbinden, verwenden Sie die URL zur Front-End-API Ihrer Unleash-Instanz ( <unleash-url>/api/frontend
) als url
Parameter. Verwenden Sie für den clientKey
Parameter ein FRONTEND
-Token, das von Ihrer Unleash-Instanz generiert wurde. Die erforderlichen Schritte finden Sie im Leitfaden zum Erstellen von API-Tokens .
Um dieses SDK mit dem Unleash-Proxy zu verbinden, verwenden Sie die URL des Proxys und einen Proxy-Client-Schlüssel. Der Konfigurationsabschnitt der Unleash-Proxy-Dokumentation enthält weitere Informationen zum Konfigurieren von Client-Schlüsseln für Ihren Proxy.
Sie sollten auf die ready
oder initialized
des Clients warten, bevor Sie mit der Arbeit damit beginnen. Bevor es fertig ist, meldet der Client möglicherweise nicht den richtigen Status für Ihre Funktionen.
unleash . on ( 'ready' , ( ) => {
if ( unleash . isEnabled ( 'proxy.demo' ) ) {
console . log ( 'proxy.demo is enabled' ) ;
} else {
console . log ( 'proxy.demo is disabled' ) ;
}
} ) ;
Der Unterschied zwischen den Ereignissen wird im Abschnitt zu den verfügbaren Ereignissen beschrieben.
Sobald der Client bereit ist, können Sie mit der Überprüfung der Funktionen Ihrer Anwendung beginnen. Verwenden Sie die Methode isEnabled
um den Status jeder gewünschten Funktion zu überprüfen:
unleash . isEnabled ( 'proxy.demo' ) ;
Sie können die getVariant
-Methode verwenden, um die Variante einer aktivierten Funktion abzurufen, die Varianten hat . Wenn die Funktion deaktiviert ist oder keine Varianten hat, erhalten Sie die deaktivierte Variante zurück
const variant = unleash . getVariant ( 'proxy.demo' ) ;
if ( variant . name === 'blue' ) {
// something with variant blue...
}
Der Unleash-Kontext wird verwendet, um Funktionen anhand der Attribute eines aktuellen Benutzers zu bewerten. Um den Unleash-Kontext in diesem SDK zu aktualisieren und zu konfigurieren, verwenden Sie die Methoden updateContext
, setContextField
und removeContextField
.
Der von Ihnen in Ihrer App festgelegte Kontext wird als Abfrageparameter zur Funktionsauswertung an den Unleash-Proxy oder die Front-End-API weitergeleitet.
Die updateContext
Methode ersetzt den gesamten (veränderlichen Teil) des Unleash-Kontexts durch die von Ihnen übergebenen Daten.
Die setContextField
-Methode wirkt sich nur auf die von Ihnen ausgewählte Eigenschaft aus. Es hat keine Auswirkungen auf andere Eigenschaften des Unleash-Kontexts.
unleash . updateContext ( { userId : '1233' } ) ;
unleash . setContextField ( 'userId' , '4141' ) ;
Die Methode removeContextField
wirkt sich nur auf die von Ihnen ausgewählte Eigenschaft aus. Es hat keine Auswirkungen auf andere Eigenschaften des Unleash-Kontexts.
unleash . updateContext ( { userId : '1233' , sessionId : 'sessionNotAffected' } ) ;
unleash . removeContextField ( 'userId' ) ;
Das Unleash SDK bietet die folgenden Optionen:
Option | erforderlich | Standard | Beschreibung |
---|---|---|---|
URL | Ja | n / A | Die Unleash-Proxy-URL, mit der eine Verbindung hergestellt werden soll. Beispiel: https://examples.com/proxy |
clientKey | Ja | n / A | Das zu verwendende Unleash-Proxy-Geheimnis |
AppName | Ja | n / A | Der Name der Anwendung, die dieses SDK verwendet. Wird als Teil der an Unleash Proxy gesendeten Metriken verwendet. Wird auch Teil des Unleash-Kontexts sein. |
Kontext | NEIN | {} | Der anfängliche Unleash-Kontext. Dies wird als Ausgangskontext für alle Funktionsumschaltevaluierungen verwendet. Die Optionen appName und environment werden automatisch mit den Werten gefüllt, die Sie für diese Optionen übergeben. |
Aktualisierungsintervall | NEIN | 30 | Wie oft (in Sekunden) das SDK nach einer aktualisierten Toggle-Konfiguration suchen soll. Bei Einstellung auf 0 wird die Suche nach Updates deaktiviert |
deaktivierenRefresh | NEIN | false | Wenn dieser Wert auf „true“ gesetzt ist, prüft der Client nicht, ob eine aktualisierte Toggle-Konfiguration vorliegt |
metricsInterval | NEIN | 60 | Wie oft (in Sekunden) das SDK Nutzungsmetriken an Unleash Proxy zurücksenden soll. Es wird nach dem ersten Metrikbericht gestartet, der nach dem konfigurierten metricsIntervalInitial gesendet wird |
metricsIntervalInitial | NEIN | 2 | Wie lange soll das SDK auf den ersten Metrikbericht zurück an die Unleash-API warten? Wenn Sie den anfänglichen Metrikaufruf deaktivieren möchten, können Sie ihn auf 0 setzen. |
disableMetrics | NEIN | false | Setzen Sie diese Option auf true wenn Sie Nutzungsmetriken deaktivieren möchten |
Speicheranbieter | NEIN | LocalStorageProvider im Browser, andernfalls InMemoryStorageProvider | Ermöglicht das Einfügen eines benutzerdefinierten StoreProviders |
bringen | NEIN | window.fetch oder globaler fetch | Ermöglicht Ihnen, die zu verwendende Abrufimplementierung zu überschreiben. Nützlich in Node.js-Umgebungen, in denen Sie node-fetch injizieren können |
createAbortController | NEIN | () => new AbortController() | Ermöglicht Ihnen, die standardmäßige AbortController Erstellung zu überschreiben. Wird verwendet, um Anfragen mit veraltetem Kontext abzubrechen. Setzen Sie es auf () => null wenn Sie nicht damit umgehen möchten. |
Bootstrap | NEIN | [] | Ermöglicht das Bootstrapping der zwischengespeicherten Funktionsumschaltkonfiguration. |
BootstrapOverride | NEIN | true | Soll der Bootstrap automatisch zwischengespeicherte Daten im lokalen Speicher überschreiben? Wird nur verwendet, wenn Bootstrap kein leeres Array ist. |
HeaderName | NEIN | Authorization | Welchen Header das SDK zur Autorisierung mit Unleash/Unleash Proxy verwenden soll. Der Header erhält den clientKey als Wert. |
benutzerdefinierteHeader | NEIN | {} | Zusätzliche Header, die beim Senden von HTTP-Anfragen an den Unleash-Proxy verwendet werden. Bei Namenskollisionen mit den Standardheadern wird der customHeaders Wert verwendet, sofern dieser nicht null oder undefined ist. customHeaders -Werte, die null oder undefined sind, werden ignoriert. |
impressionDataAll | NEIN | false | Ermöglicht das Auslösen von „Impression“-Ereignissen für alle getToggle und getVariant -Aufrufe. Dies ist besonders nützlich für „deaktivierte“ Funktionsumschaltungen, die für Frontend-SDKs nicht sichtbar sind. |
Umfeld | NEIN | default | Legt die environment des Unleash-Kontexts fest. Dies hat keine Auswirkungen auf die Unleash-Umgebung des SDK. |
usePOSTrequests | NEIN | false | Konfiguriert den Client so, dass beim Anfordern aktivierter Funktionen POST-Anfragen anstelle von GET verwendet werden. Dies ist hilfreich, wenn vertrauliche Informationen (z. B. Benutzer-E-Mail, wenn sie als Benutzer-ID verwendet werden) im Kontext übergeben werden, um zu verhindern, dass sie in der URL verloren gehen. HINWEIS: Post-Anfragen werden von der in Unleash integrierten Frontend-API nicht unterstützt. |
Experimental- | NEIN | {} | Ermöglicht optionales Experimentieren. togglesStorageTTL : Wie lange (Time To Live) in Sekunden die Umschaltungen im Speicher als gültig gelten und beim Start nicht abgerufen werden sollten. Wenn der Wert auf 0 gesetzt ist, wird die Ablaufprüfung deaktiviert und es wird immer als abgelaufen betrachtet. |
Der Client ist auch ein Ereignisemitter. Das bedeutet, dass Ihr Code Aktualisierungen vom Client abonnieren kann. Dies ist eine praktische Möglichkeit, eine einzelne Seiten-App zu aktualisieren, wenn Statusaktualisierungen umgeschaltet werden.
unleash . on ( 'update' , ( ) => {
const myToggle = unleash . isEnabled ( 'proxy.demo' ) ;
//do something useful
} ) ;
PS! Bitte denken Sie daran, dass Sie Ihre Event-Listener immer vor Ihrem Aufruf von
unleash.start()
registrieren sollten. Wenn Sie sie registrieren, nachdem Sie das SDK gestartet haben, besteht die Gefahr, dass wichtige Ereignisse verloren gehen.
Sie können über den „Kontext“ eine benutzerdefinierte Sitzungs-ID angeben. Wenn Sie keine Sitzungs-ID angeben, erstellt dieses SDK eine zufällige Sitzungs-ID, die auch im bereitgestellten Speicher (lokaler Speicher) gespeichert wird. Dadurch, dass immer eine konsistente Sitzungs-ID verfügbar ist, wird sichergestellt, dass auch „anonyme“ Benutzer ein konsistentes Erlebnis erhalten, wenn Funktionsumschaltungen ausgewertet werden, in Kombination mit einem schrittweisen (prozentualen) Rollout.
Sie können den Unleash-Client stoppen, indem Sie die stop
-Methode aufrufen. Sobald der Client gestoppt wurde, sucht er nicht mehr nach Updates und sendet keine Kennzahlen mehr an den Server.
Ein gestoppter Client kann neu gestartet werden.
unleash . stop ( )
Dieses SDK kann mit React Native Storage @react-native-async-storage/async-storage oder React-native-shared-preferences und vielem mehr arbeiten, um die Sicherungsfunktion lokal umzuschalten. Dies ist nützlich, um das SDK zu booten, wenn der Benutzer das nächste Mal zu Ihrer Anwendung zurückkehrt.
Sie können Ihre eigene Speicherimplementierung bereitstellen.
Beispiele:
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 ;
}
} ,
} ) ;
Dieses SDK kann auch in node.js-Anwendungen (ab v1.4.0) verwendet werden. Bitte beachten Sie, dass Sie eine gültige „Fetch“-Implementierung bereitstellen müssen. Aus diesem Paket werden nur ECMAScript-Module exportiert.
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 >
Jetzt ist es möglich, das SDK mit Ihrer eigenen Funktionsumschaltkonfiguration zu booten, wenn Sie keinen API-Aufruf durchführen möchten.
Dies ist auch nützlich, wenn Sie möchten, dass sich die Schalter unmittelbar nach der Initialisierung des SDK in einem bestimmten Zustand befinden.
Fügen Sie ein bootstrap
Attribut hinzu, wenn Sie einen neuen UnleashClient
erstellen.
Es gibt auch ein bootstrapOverride
Attribut, das standardmäßig true
ist.
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
} ) ;
HINWEISE:bootstrapOverride
true
hat (standardmäßig), werden alle lokal zwischengespeicherten Daten mit dem angegebenen Bootstrap überschrieben.
Wenn bootstrapOverride
false
hat, werden alle lokal zwischengespeicherten Daten nicht überschrieben, es sei denn, der lokale Cache ist leer.
Sie können den automatischen Aktualisierungsmechanismus des Unleash-Feature-Flags und die Metrikaktualisierung deaktivieren, indem Sie die Optionen refreshInterval
und/oder metricsInterval
auf 0
setzen. In diesem Fall liegt es in Ihrer Verantwortung, die Methoden updateToggles
und/oder sendMetrics
aufzurufen. Dieser Ansatz ist in Umgebungen nützlich, die die setInterval
-API nicht unterstützen, beispielsweise für Servicemitarbeiter.