How Can I Quickly Integrate Remote Configuration to a Web App?

Mayism
2 min readJun 17, 2021

Recently, I found that Remote Configuration of AppGallery Connect now supports the web platform, which I’ve long been waiting for. Previously, it has only been supported on Android, but now it can be applied to web apps. For details about the integration demo, visit GitHub.

Integration Steps

1. Enable the service.

a) Sign in to AppGallery Connect and create a web app.

b) Enable Remote Configuration.

c) Click New parameter and set parameters.

2. Integrate the SDK.

a) Run the following command:

npm install –save @agconnect/remoteconfig

3. Implement the functions.

a) Obtain the local configuration parameters.

Create a local configuration map in the Vue.

Apply the local settings.

export function applyDefault(map) {
return agconnect.remoteConfig().applyDefault(map);
}

b) Call the fetch API to fetch parameter values from the cloud.

export async function fetch() {
return agconnect.remoteConfig().fetch().then(() => {
return Promise.resolve();
}).catch((err) => {
return Promise.reject(err);
});
}

c) Apply the parameter values to the local host immediately or upon the next launch.

1. Applying the parameter values immediately:

Call the apply API.

export function apply() {
return agconnect
.remoteConfig().apply().then((res) => {
return Promise.resolve(res);
}
).catch(error => {
return Promise.reject(error);
});
}

2. Applying the parameter values upon the next launch:

Call the applyLastFetch API to apply the last fetched parameter values.

// Load configurations. 
export function applyLastLoad() {
return agconnect
.remoteConfig().loadLastFetched().then(async (res) => {
if (res) {
await agconnect.remoteConfig().apply(res);
}
return Promise.resolve(res);
}
).catch(error => {
return Promise.reject(error);
});
}

d) Obtain all parameter values from the local host and cloud.

Call the getMergedAll API to obtain all parameter values.

export function getMergedAll() {
return agconnect.remoteConfig().getMergedAll();
}

e) Call the clearAll API to clear all parameter values.

export function clearAll() {
agconnect.remoteConfig().clearAll();
}

References:

Demo:

https://github.com/AppGalleryConnect/agc-demos/tree/main/Web/agc-romoteconfig-demo-javascript

Remote Configuration Development Guide:

https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-remoteconfig-web-getstarted-0000001056501223

--

--