Klien proksi JavaScript adalah klien Unleash kecil yang ditulis dalam JavaScript tanpa ketergantungan eksternal apa pun (kecuali dari API browser). Klien ini menyimpan tombol yang relevan untuk pengguna saat ini di localStorage
dan menyinkronkan dengan Unleash (API front-end Unleash atau proksi Unleash) di latar belakang. Karena matikan disimpan di browser pengguna, klien dapat menggunakannya untuk melakukan bootstrap sendiri saat pengguna mengunjungi halaman web yang sama lagi.
Klien ini mengharapkan fetch
tersedia. Jika Anda perlu mendukung browser lama, Anda mungkin harus menggunakan pengambilan polyfill.
Paket ini tidak terikat pada framework apa pun, namun dapat digunakan bersama dengan framework paling populer, contoh:
npm install unleash - proxy - client
TIPS : Sebagai SDK sisi klien, SDK ini mengharuskan Anda terhubung ke proksi Unleash atau ke API front-end Unleash. Lihat bagian opsi koneksi untuk informasi lebih lanjut.
Konfigurasikan klien sesuai dengan kebutuhan Anda. Contoh berikut hanya memberikan opsi yang diperlukan. Lihat bagian opsi yang tersedia untuk daftar lengkap.
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 ( ) ;
Untuk menghubungkan SDK ini ke API front-end instance Unleash Anda, gunakan URL ke API front-end instance Unleash Anda ( <unleash-url>/api/frontend
) sebagai parameter url
. Untuk parameter clientKey
, gunakan token FRONTEND
yang dihasilkan dari instance Unleash Anda. Lihat panduan cara membuat token API untuk langkah-langkah yang diperlukan.
Untuk menghubungkan SDK ini ke proksi Unleash, gunakan URL proksi dan kunci klien proksi. Bagian konfigurasi dokumen proksi Unleash berisi informasi lebih lanjut tentang cara mengonfigurasi kunci klien untuk proksi Anda.
Anda harus menunggu acara klien ready
atau initialized
sebelum Anda mulai mengerjakannya. Sebelum siap, klien mungkin tidak melaporkan status yang benar untuk fitur Anda.
unleash . on ( 'ready' , ( ) => {
if ( unleash . isEnabled ( 'proxy.demo' ) ) {
console . log ( 'proxy.demo is enabled' ) ;
} else {
console . log ( 'proxy.demo is disabled' ) ;
}
} ) ;
Perbedaan antara peristiwa-peristiwa tersebut dijelaskan di bagian peristiwa-peristiwa yang tersedia.
Setelah klien siap, Anda dapat mulai memeriksa fitur di aplikasi Anda. Gunakan metode isEnabled
untuk memeriksa status fitur apa pun yang Anda inginkan:
unleash . isEnabled ( 'proxy.demo' ) ;
Anda dapat menggunakan metode getVariant
untuk mendapatkan varian fitur aktif yang memiliki varian . Jika fitur tersebut dinonaktifkan atau tidak memiliki varian, Anda akan mendapatkan kembali varian yang dinonaktifkan tersebut
const variant = unleash . getVariant ( 'proxy.demo' ) ;
if ( variant . name === 'blue' ) {
// something with variant blue...
}
Konteks Unleash digunakan untuk mengevaluasi fitur terhadap atribut pengguna saat ini. Untuk memperbarui dan mengonfigurasi konteks Unleash di SDK ini, gunakan metode updateContext
, setContextField
dan removeContextField
.
Konteks yang Anda tetapkan di aplikasi Anda akan diteruskan ke proksi Unleash atau API front-end sebagai parameter kueri untuk evaluasi fitur.
Metode updateContext
akan menggantikan seluruh (bagian yang dapat diubah) dari konteks Unleash dengan data yang Anda berikan.
Metode setContextField
hanya bekerja pada properti yang Anda pilih. Itu tidak mempengaruhi properti lain dari konteks Unleash.
unleash . updateContext ( { userId : '1233' } ) ;
unleash . setContextField ( 'userId' , '4141' ) ;
Metode removeContextField
hanya bekerja pada properti yang Anda pilih. Itu tidak mempengaruhi properti lain dari konteks Unleash.
unleash . updateContext ( { userId : '1233' , sessionId : 'sessionNotAffected' } ) ;
unleash . removeContextField ( 'userId' ) ;
Unleash SDK mengambil opsi berikut:
pilihan | diperlukan | bawaan | keterangan |
---|---|---|---|
url | Ya | tidak ada | Unleash Proxy URL untuk dihubungkan. Misalnya: https://examples.com/proxy |
kunci klien | Ya | tidak ada | Rahasia Unleash Proxy yang akan digunakan |
Nama aplikasi | Ya | tidak ada | Nama aplikasi yang menggunakan SDK ini. Akan digunakan sebagai bagian dari metrik yang dikirim ke Unleash Proxy. Juga akan menjadi bagian dari Unleash Context. |
konteks | TIDAK | {} | Konteks Unleash awal. Ini akan digunakan sebagai konteks awal untuk semua evaluasi peralihan fitur. Opsi appName dan environment akan secara otomatis diisi dengan nilai yang Anda berikan untuk opsi tersebut. |
interval penyegaran | TIDAK | 30 | Seberapa sering, dalam hitungan detik, SDK harus memeriksa konfigurasi pengalih yang diperbarui. Jika disetel ke 0 akan menonaktifkan pemeriksaan pembaruan |
nonaktifkanSegarkan | TIDAK | false | Jika disetel ke true, klien tidak akan memeriksa konfigurasi sakelar yang diperbarui |
interval metrik | TIDAK | 60 | Seberapa sering, dalam hitungan detik, SDK harus mengirimkan metrik penggunaan kembali ke Unleash Proxy. Ini akan dimulai setelah laporan metrik awal, yang dikirim setelah metricsIntervalInitial dikonfigurasi |
metrikIntervalInitial | TIDAK | 2 | Berapa lama SDK harus menunggu hingga metrik pertama dilaporkan kembali ke Unleash API. Jika Anda ingin menonaktifkan panggilan metrik awal, Anda dapat menyetelnya ke 0. |
nonaktifkanMetrik | TIDAK | false | Setel opsi ini ke true jika Anda ingin menonaktifkan metrik penggunaan |
Penyedia penyimpanan | TIDAK | LocalStorageProvider di browser, InMemoryStorageProvider sebaliknya | Memungkinkan Anda memasukkan StoreProvider khusus |
mengambil | TIDAK | window.fetch atau fetch global | Memungkinkan Anda mengganti implementasi pengambilan yang akan digunakan. Berguna di lingkungan Node.js tempat Anda dapat memasukkan node-fetch |
buatAbortController | TIDAK | () => new AbortController() | Memungkinkan Anda mengganti pembuatan AbortController default. Digunakan untuk membatalkan permintaan dengan konteks yang sudah ketinggalan zaman. Setel ke () => null jika Anda tidak ingin menanganinya. |
bootstrap | TIDAK | [] | Memungkinkan Anda melakukan bootstrap pada konfigurasi peralihan fitur yang di-cache. |
bootstrapOverride | TIDAK | true | Haruskah bootstrap secara otomatis mengganti data cache di penyimpanan lokal. Hanya akan digunakan jika bootstrap bukan array kosong. |
Nama header | TIDAK | Authorization | Header mana yang harus digunakan SDK untuk mengotorisasi dengan Unleash/Unleash Proxy. Header akan diberikan clientKey sebagai nilainya. |
customHeader | TIDAK | {} | Header tambahan untuk digunakan saat membuat permintaan HTTP ke proksi Unleash. Jika terjadi benturan nama dengan header default, nilai customHeaders akan digunakan jika bukan null atau undefined . nilai customHeaders yang null atau undefined akan diabaikan. |
impresiDataSemua | TIDAK | false | Memungkinkan Anda memicu peristiwa "tayangan" untuk semua pemanggilan getToggle dan getVariant . Hal ini sangat berguna untuk peralihan fitur "dinonaktifkan" yang tidak terlihat oleh SDK frontend. |
lingkungan | TIDAK | default | Menyetel opsi environment konteks Unleash. Ini tidak mempengaruhi lingkungan Unleash SDK. |
gunakanPOSTpermintaan | TIDAK | false | Mengonfigurasi klien untuk menggunakan permintaan POST, bukan GET, saat meminta fitur yang diaktifkan. Hal ini berguna ketika informasi sensitif (seperti email pengguna, ketika digunakan sebagai ID pengguna) diteruskan dalam konteks untuk menghindari kebocoran di URL. CATATAN: Permintaan postingan tidak didukung oleh api frontend yang ada di Unleash. |
eksperimental | TIDAK | {} | Mengaktifkan eksperimen opsional. togglesStorageTTL : Berapa lama (Time To Live), dalam hitungan detik, tombol di penyimpanan dianggap valid dan tidak boleh diambil di awal. Jika disetel ke 0 akan menonaktifkan pemeriksaan kedaluwarsa dan akan dianggap selalu kedaluwarsa. |
Klien juga merupakan pemancar peristiwa. Ini berarti kode Anda dapat berlangganan pembaruan dari klien. Ini adalah cara yang rapi untuk memperbarui aplikasi satu halaman saat beralih pembaruan status.
unleash . on ( 'update' , ( ) => {
const myToggle = unleash . isEnabled ( 'proxy.demo' ) ;
//do something useful
} ) ;
PS! Harap diingat bahwa Anda harus selalu mendaftarkan pendengar acara Anda sebelum panggilan Andarelease.start
unleash.start()
. Jika Anda mendaftarkannya setelah memulai SDK, Anda berisiko kehilangan peristiwa penting.
Anda dapat memberikan id sesi khusus melalui "konteks". Jika Anda tidak memberikan sessionId, SDK ini akan membuat id sesi acak, yang juga akan disimpan di penyimpanan yang disediakan (penyimpanan lokal). Dengan selalu menyediakan sessionId yang konsisten memastikan bahwa bahkan pengguna "anonim" akan mendapatkan pengalaman yang konsisten ketika peralihan fitur dievaluasi, dikombinasikan dengan peluncuran bertahap (berdasarkan persentase).
Anda dapat menghentikan klien Unleash dengan memanggil metode stop
. Setelah klien dihentikan, klien tidak akan lagi memeriksa pembaruan atau mengirim metrik ke server.
Klien yang terhenti dapat di-restart.
unleash . stop ( )
SDK ini dapat bekerja dengan penyimpanan React Native @react-native-async-storage/async-storage atau react-native-shared-preferences dan banyak lagi untuk mengaktifkan fitur cadangan secara lokal. Ini berguna untuk melakukan bootstrap pada SDK saat pengguna kembali ke aplikasi Anda lagi.
Anda dapat menyediakan implementasi penyimpanan Anda sendiri.
Contoh:
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 ini juga dapat digunakan di aplikasi node.js (mulai v1.4.0). Harap dicatat bahwa Anda harus memberikan implementasi "pengambilan" yang valid. Hanya modul ECMAScript yang diekspor dari paket ini.
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 ) ;
indeks.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 >
Sekarang dimungkinkan untuk mem-bootstrap SDK dengan konfigurasi peralihan fitur Anda sendiri ketika Anda tidak ingin melakukan panggilan API.
Hal ini juga berguna jika Anda mengharuskan tombol berada dalam keadaan tertentu segera setelah menginisialisasi SDK.
Tambahkan atribut bootstrap
saat membuat UnleashClient
baru.
Ada juga atribut bootstrapOverride
yang secara default adalah 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
} ) ;
CATATAN:bootstrapOverride
true
(secara default), data cache lokal apa pun akan diganti dengan bootstrap yang ditentukan.
Jika bootstrapOverride
false
data cache lokal apa pun tidak akan ditimpa kecuali cache lokal kosong.
Anda dapat memilih untuk tidak ikut serta dalam mekanisme penyegaran otomatis tanda fitur Unleash dan pembaruan metrik dengan menyetel opsi refreshInterval
dan/atau metricsInterval
ke 0
. Dalam hal ini, Anda bertanggung jawab untuk memanggil metode updateToggles
dan/atau sendMetrics
. Pendekatan ini berguna di lingkungan yang tidak mendukung API setInterval
, seperti pekerja layanan.