Bắt đầu sử dụng Cấu hình từ xa trên web

Chọn nền tảng:

iOS+ Android Web Flutter Unity C++

Bạn có thể sử dụng Firebase Remote Config để xác định các tham số trong ứng dụng và cập nhật giá trị của các tham số đó trên đám mây, cho phép bạn sửa đổi giao diện và hành vi của ứng dụng mà không cần phân phối bản cập nhật ứng dụng. Hướng dẫn này sẽ hướng dẫn bạn các bước để bắt đầu và cung cấp một số mã mẫu. Bạn có thể sao chép hoặc tải xuống tất cả mã mẫu này từ kho lưu trữ firebase/quickstart-js trên GitHub.

Bước 1: Thêm và khởi chạy SDK Remote Config

Nếu chưa có, hãy cài đặt Firebase JS SDK và khởi chạy Firebase.
Thêm SDK Remote Config JS và khởi chạy Remote Config:

Web

import { initializeApp } from "firebase/app";
import { getRemoteConfig } from "firebase/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = getRemoteConfig(app);

Web

import firebase from "firebase/compat/app";
import "firebase/compat/remote-config";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Remote Config and get a reference to the service
const remoteConfig = firebase.remoteConfig();

Đối tượng này được dùng để lưu trữ các giá trị tham số mặc định trong ứng dụng, tìm nạp các giá trị tham số đã cập nhật từ phần phụ trợ Remote Config và kiểm soát thời điểm cung cấp các giá trị đã tìm nạp cho ứng dụng.

Bước 2: Đặt khoảng thời gian tìm nạp tối thiểu

Trong quá trình phát triển, bạn nên đặt khoảng thời gian tìm nạp tối thiểu tương đối thấp. Xem phần Điều tiết băng thông để biết thêm thông tin.

Web

// The default and recommended production fetch interval for Remote Config is 12 hours
remoteConfig.settings.minimumFetchIntervalMillis = 3600000;rc_set_minimum_fetch_time.js

Web

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;index.js

Bước 3: Đặt giá trị tham số mặc định trong ứng dụng

Bạn có thể đặt giá trị tham số mặc định trong ứng dụng trong đối tượng Remote Config để ứng dụng hoạt động như dự định trước khi kết nối với phần phụ trợ Remote Configvà để các giá trị mặc định có sẵn nếu không có giá trị nào được đặt trên phần phụ trợ.

Web

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};rc_set_default_values.js

Web

remoteConfig.defaultConfig = {
  "welcome_message": "Welcome"
};index.js

Nếu đã định cấu hình các giá trị tham số phần phụ trợ Remote Config, bạn có thể tải xuống một tệp JSON đã tạo bao gồm tất cả các giá trị mặc định và đưa tệp đó vào gói ứng dụng:

Kiến trúc chuyển trạng thái đại diện (REST)

curl --compressed -D headers -H "Authorization: Bearer token" -X GET https://firebaseremoteconfig.googleapis.com/v1/projects/my-project-id/remoteConfig:downloadDefaults?format=JSON -o remote_config_defaults.json

Bạn có thể tạo mã thông báo người mang bằng cách chạy lệnh sau bằng Google Cloud CLI hoặc Cloud Shell:

gcloud auth print-access-token

Mã thông báo này có thời gian tồn tại ngắn, vì vậy, bạn có thể cần tạo lại mã thông báo này nếu gặp lỗi xác thực.

Bảng điều khiển Firebase

Trong thẻ Tham số, hãy mở Trình đơn rồi chọn Tải giá trị mặc định xuống.
Khi được nhắc, hãy bật .json cho web, sau đó nhấp vào Tải tệp xuống.

Các ví dụ sau đây cho thấy 2 cách khác nhau để bạn có thể nhập và đặt giá trị mặc định trong ứng dụng. Ví dụ đầu tiên sử dụng fetch, thao tác này sẽ tạo một yêu cầu HTTP cho tệp mặc định có trong gói ứng dụng:

  const rcDefaultsFile = await fetch('remote_config_defaults.json');
  const rcDefaultsJson = await rcDefaultsFile.json();
  remoteConfig.defaultConfig = rcDefaultsJson;

Ví dụ tiếp theo sử dụng require, thao tác này sẽ biên dịch các giá trị vào ứng dụng của bạn trong thời gian xây dựng:

  let rcDefaults = require('./remote_config_defaults.json');
  remoteConfig.defaultConfig = rcDefaults;

Bước 4: Nhận giá trị tham số để sử dụng trong ứng dụng

Bây giờ, bạn có thể nhận giá trị tham số từ đối tượng Remote Config. Nếu sau này bạn đặt giá trị trong phần phụ trợ, hãy tìm nạp các giá trị đó rồi kích hoạt chúng, thì các giá trị đó sẽ có sẵn cho ứng dụng của bạn.Để nhận các giá trị này, hãy gọi phương thức getValue(), cung cấp khoá tham số làm đối số.

Web

import { getValue } from "firebase/remote-config";

const val = getValue(remoteConfig, "welcome_messsage");rc_get_values.js

Web

const val = remoteConfig.getValue("welcome_messsage");index.js

Bước 5: Đặt giá trị tham số

Bằng cách sử dụng bảng điều khiển Firebase hoặc Remote Config API phần phụ trợ, bạn có thể tạo các giá trị mặc định mới ở phía máy chủ để ghi đè các giá trị trong ứng dụng theo logic có điều kiện hoặc nhắm mục tiêu đến người dùng mà bạn muốn. Phần này sẽ hướng dẫn bạn các bước trên bảng điều khiển Firebase để tạo các giá trị này.

Trong Firebase bảng điều khiển, hãy mở dự án của bạn.
Chọn Remote Config trong trình đơn để xem trang tổng quan Remote Config.
Xác định các tham số có cùng tên với các tham số mà bạn đã xác định trong ứng dụng. Đối với mỗi tham số, bạn có thể đặt một giá trị mặc định (giá trị này sẽ ghi đè giá trị mặc định trong ứng dụng) và bạn cũng có thể đặt các giá trị có điều kiện. Để tìm hiểu thêm, hãy xem bài viết Remote Config Tham số và Điều kiện.
Nếu sử dụng các điều kiện tín hiệu tuỳ chỉnh , hãy xác định các thuộc tính và giá trị của chúng. Ví dụ sau đây cho thấy cách xác định điều kiện tín hiệu tuỳ chỉnh.
```
  let customSignals = {
     "city": "Tokyo",
     "preferred_event_category": "sports"
  }

  setCustomSignals(config, customSignals);
```

Bước 6: Tìm nạp và kích hoạt các giá trị

Để tìm nạp các giá trị tham số từ phần phụ trợ Remote Config, hãy gọi phương thức fetchConfig(). Mọi giá trị mà bạn đặt trên phần phụ trợ đều được tìm nạp và lưu vào bộ nhớ đệm trong đối tượng Remote Config.
Để cung cấp các giá trị tham số đã tìm nạp cho ứng dụng, hãy gọi phương thức activate().

Đối với những trường hợp bạn muốn tìm nạp và kích hoạt các giá trị trong một lệnh gọi, hãy sử dụng fetchAndActivate() như trong ví dụ này:

Web

import { fetchAndActivate } from "firebase/remote-config";

fetchAndActivate(remoteConfig)
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });rc_fetch_config_callback.js

Web

remoteConfig.fetchAndActivate()
  .then(() => {
    // ...
  })
  .catch((err) => {
    // ...
  });index.js

Vì các giá trị tham số đã cập nhật này ảnh hưởng đến hành vi và giao diện của ứng dụng, nên bạn cần kích hoạt các giá trị đã tìm nạp vào thời điểm đảm bảo trải nghiệm mượt mà cho người dùng, chẳng hạn như lần tiếp theo người dùng mở ứng dụng của bạn. Hãy xem bài viết Chiến lược tải Cấu hình từ xa để biết thêm thông tin và ví dụ.

Bước 7: Theo dõi các bản cập nhật theo thời gian thực

Sau khi tìm nạp các giá trị tham số, bạn có thể sử dụng Remote Config theo thời gian thực để theo dõi các bản cập nhật từ phần phụ trợ Remote Config. Theo thời gian thực Remote Config báo hiệu cho các thiết bị đã kết nối khi có bản cập nhật và tự động tìm nạp các thay đổi sau khi bạn phát hành phiên bản Remote Config mới.

Trong ứng dụng, hãy sử dụng onConfigUpdate để bắt đầu theo dõi các bản cập nhật và tự động tìm nạp mọi giá trị tham số mới. Triển khai lệnh gọi lại next để kích hoạt cấu hình đã cập nhật.

  onConfigUpdate(remoteConfig, {
     next: (configUpdate) => {
        console.log("Updated keys:", configUpdate.getUpdatedKeys());
        if (configUpdate.getUpdatedKeys().has("welcome_message")) {
           activate(remoteConfig).then(() => {
           showWelcomeMessage();
           });
        }
     },
     error: (error) => {
        console.log("Config update error:", error);
     },
     complete: () => {
        console.log("Listening stopped.");
     }
  });

Lần tiếp theo khi bạn phát hành một phiên bản Remote Config mới, các thiết bị đang chạy ứng dụng của bạn và theo dõi các thay đổi sẽ gọi trình xử lý hoàn thành.

Điều tiết băng thông

Nếu một ứng dụng tìm nạp quá nhiều lần trong một khoảng thời gian ngắn, thì các lệnh gọi tìm nạp có thể bị điều tiết băng thông. Trong những trường hợp như vậy, SDK sẽ gửi một lỗi FETCH_THROTTLE. Bạn nên nắm bắt lỗi này và thử lại ở chế độ thời gian đợi luỹ thừa, chờ khoảng thời gian dài hơn giữa các yêu cầu tìm nạp tiếp theo.

Trong quá trình phát triển ứng dụng, bạn có thể muốn làm mới bộ nhớ đệm rất thường xuyên (nhiều lần mỗi giờ) để có thể nhanh chóng lặp lại khi phát triển và kiểm thử ứng dụng. Để đáp ứng việc lặp lại nhanh chóng trên một dự án có nhiều nhà phát triển, bạn có thể tạm thời thêm một thuộc tính có khoảng thời gian tìm nạp tối thiểu thấp (Settings.minimumFetchIntervalMillis) vào ứng dụng.

Khoảng thời gian tìm nạp mặc định và được đề xuất cho Remote Config là 12 giờ. Điều này có nghĩa là cấu hình sẽ không được tìm nạp từ phần phụ trợ nhiều hơn một lần trong khoảng thời gian 12 giờ, bất kể số lượng lệnh gọi tìm nạp thực tế được thực hiện . Cụ thể, khoảng thời gian tìm nạp tối thiểu được xác định theo thứ tự sau:

Tham số trong Settings.minimumFetchIntervalMillis.
Giá trị mặc định là 12 giờ.