ابدأ مع Firebase Remote Config

يمكنك استخدام Firebase Remote Config لتحديد المعلمات في تطبيقك وتحديث قيمها في السحابة، مما يسمح لك بتعديل مظهر تطبيقك وسلوكه دون توزيع تحديث التطبيق. يرشدك هذا الدليل خلال الخطوات اللازمة للبدء ويقدم بعض نماذج التعليمات البرمجية، وكلها متاحة للاستنساخ أو التنزيل من مستودع firebase/quickstart-js GitHub.

الخطوة 1: إضافة وتهيئة Remote Config SDK

1. إذا لم تكن قد قمت بذلك بالفعل، فقم بتثبيت Firebase JS SDK وقم بتهيئة Firebase .

2. أضف Remote Config JS SDK وقم بتهيئة Remote Config:

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);

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();

يتم استخدام هذا الكائن لتخزين قيم المعلمات الافتراضية داخل التطبيق، وجلب قيم المعلمات المحدثة من الواجهة الخلفية للتكوين عن بعد، والتحكم في وقت إتاحة القيم التي تم جلبها لتطبيقك.

الخطوة 2: تعيين الحد الأدنى للفاصل الزمني للجلب

أثناء التطوير، يوصى بتعيين حد أدنى منخفض نسبيًا لفاصل الجلب. راجع التضييق للحصول على مزيد من المعلومات.

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

الخطوة 3: قم بتعيين قيم المعلمات الافتراضية داخل التطبيق

يمكنك تعيين قيم المعلمات الافتراضية داخل التطبيق في كائن Remote Config، بحيث يتصرف تطبيقك على النحو المنشود قبل أن يتصل بالواجهة الخلفية للتكوين عن بعد، وحتى تكون القيم الافتراضية متاحة إذا لم يتم تعيين أي منها على الواجهة الخلفية.

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

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

إذا قمت بالفعل بتكوين قيم معلمات الواجهة الخلفية لـ Remote Config، فيمكنك تنزيل ملف JSON تم إنشاؤه والذي يتضمن جميع القيم الافتراضية وتضمينها في حزمة التطبيق الخاصة بك:

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

توضح الأمثلة التالية طريقتين مختلفتين يمكنك من خلالهما استيراد القيم الافتراضية وتعيينها في تطبيقك. يستخدم المثال الأول fetch ، والذي سيرسل طلب HTTP إلى ملف الإعدادات الافتراضية المضمن في حزمة تطبيقك:

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

يستخدم المثال التالي require ، الذي يجمع القيم في تطبيقك في وقت الإنشاء:

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

الخطوة 4: احصل على قيم المعلمات لاستخدامها في تطبيقك

يمكنك الآن الحصول على قيم المعلمات من كائن التكوين عن بعد. إذا قمت لاحقًا بتعيين قيم في الواجهة الخلفية، وإحضارها، ثم تنشيطها، فستكون هذه القيم متاحة لتطبيقك. للحصول على هذه القيم، اتصل بطريقة getValue() ، مع توفير مفتاح المعلمة كوسيطة.

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

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

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

الخطوة 5: تعيين قيم المعلمات

باستخدام وحدة تحكم Firebase أو واجهات برمجة التطبيقات الخلفية للتكوين عن بعد ، يمكنك إنشاء قيم افتراضية جديدة من جانب الخادم تتجاوز القيم داخل التطبيق وفقًا للمنطق الشرطي المطلوب أو استهداف المستخدم. يرشدك هذا القسم خلال خطوات وحدة تحكم Firebase لإنشاء هذه القيم.

1. في وحدة تحكم Firebase ، افتح مشروعك.
2. حدد Remote Config من القائمة لعرض لوحة معلومات التكوين عن بعد.
3. حدد المعلمات بنفس أسماء المعلمات التي حددتها في تطبيقك. بالنسبة لكل معلمة، يمكنك تعيين قيمة افتراضية (والتي ستتجاوز في النهاية القيمة الافتراضية داخل التطبيق) ويمكنك أيضًا تعيين قيم شرطية. لمعرفة المزيد، راجع معلمات وشروط التكوين عن بعد .

الخطوة 6: جلب القيم وتنشيطها

1. لجلب قيم المعلمات من الواجهة الخلفية للتكوين عن بعد، قم باستدعاء الأسلوب fetchConfig() . يتم جلب أي قيم تقوم بتعيينها على الواجهة الخلفية وتخزينها مؤقتًا في كائن Remote Config.
2. لإتاحة قيم المعلمات التي تم جلبها لتطبيقك، قم باستدعاء طريقة activate() .

بالنسبة للحالات التي تريد فيها جلب القيم وتنشيطها في مكالمة واحدة، استخدم fetchAndActivate() كما هو موضح في هذا المثال:

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

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

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

نظرًا لأن قيم المعلمات المحدثة هذه تؤثر على سلوك تطبيقك ومظهره، فيجب عليك تنشيط القيم التي تم جلبها في وقت يضمن تجربة سلسة للمستخدم، مثل المرة التالية التي يفتح فيها المستخدم تطبيقك. راجع إستراتيجيات تحميل التكوين عن بعد لمزيد من المعلومات والأمثلة.

خانق

إذا كان التطبيق يجلب عددًا كبيرًا جدًا من المرات خلال فترة زمنية قصيرة، فقد يتم تقييد مكالمات الجلب. في مثل هذه الحالات، يعرض SDK خطأ FETCH_THROTTLE . من المستحسن اكتشاف هذا الخطأ وإعادة المحاولة في وضع التراجع الأسي، والانتظار لفترات أطول بين طلبات الجلب اللاحقة.

أثناء تطوير التطبيق، قد ترغب في تحديث ذاكرة التخزين المؤقت بشكل متكرر جدًا (عدة مرات في الساعة) للسماح لك بالتكرار بسرعة أثناء تطوير تطبيقك واختباره. لاستيعاب التكرار السريع لمشروع يضم العديد من المطورين، يمكنك إضافة خاصية مؤقتًا ذات فترة جلب دنيا منخفضة ( Settings.minimumFetchIntervalMillis ) في تطبيقك.

الفاصل الزمني لجلب الإنتاج الافتراضي والموصى به للتكوين عن بعد هو 12 ساعة، مما يعني أنه لن يتم جلب التكوينات من الواجهة الخلفية أكثر من مرة واحدة خلال نافذة مدتها 12 ساعة، بغض النظر عن عدد مكالمات الجلب التي تم إجراؤها بالفعل. على وجه التحديد، يتم تحديد الحد الأدنى للفاصل الزمني للجلب بالترتيب التالي:

1. المعلمة في Settings.minimumFetchIntervalMillis .
2. القيمة الافتراضية هي 12 ساعة.

Next steps

If you haven't already, explore the Remote Config use cases , and take a look at some of the key concepts and advanced strategies documentation, including:

• Manage Remote Config template versions
• Config loading strategies

You can use Firebase Remote Config to define parameters in your app and update their values in the cloud, allowing you to modify the appearance and behavior of your app without distributing an app update. This guide walks you through the steps to get started and provides some sample code, all of which is available to clone or download from the firebase/quickstart-js GitHub repository.

Step 1: Add and initialize the Remote Config SDK

1. If you haven't already, install the Firebase JS SDK and initialize Firebase .

2. Add the Remote Config JS SDK and initialize Remote Config:

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);

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();

This object is used to store in-app default parameter values, fetch updated parameter values from the Remote Config backend, and control when fetched values are made available to your app.

Step 2: Set minimum fetch interval

During development, it's recommended to set a relatively low minimum fetch interval. See Throttling for more information.

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
rc_set_minimum_fetch_time.js

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

Step 3: Set in-app default parameter values

You can set in-app default parameter values in the Remote Config object, so that your app behaves as intended before it connects to the Remote Config backend, and so that default values are available if none are set on the backend.

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

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

If you have already configured Remote Config backend parameter values, you can download a generated JSON file that includes all default values and include it in your app bundle:

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

The following examples show two different ways you could import and set default values in your app. The first example uses fetch , which will make an HTTP request to the defaults file included in your app bundle:

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

The next example uses require , which compiles the values into your app at build time:

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

Step 4: Get parameter values to use in your app

Now you can get parameter values from the Remote Config object. If you later set values in the backend, fetch them, and then activate them, those values are available to your app.To get these values, call the getValue() method, providing the parameter key as an argument.

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

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

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

Step 5: Set parameter values

Using the Firebase console or the Remote Config backend APIs , you can create new server-side default values that override the in-app values according to your desired conditional logic or user targeting. This section walks you through the Firebase console steps to create these values.

1. In the Firebase console , open your project.
2. Select Remote Config from the menu to view the Remote Config dashboard.
3. Define parameters with the same names as the parameters that you defined in your app. For each parameter, you can set a default value (which will eventually override the in-app default value) and you can also set conditional values. To learn more, see Remote Config Parameters and Conditions .

Step 6: Fetch and activate values

1. To fetch parameter values from the Remote Config backend, call the fetchConfig() method. Any values that you set on the backend are fetched and cached in the Remote Config object.
2. To make fetched parameter values available to your app, call the activate() method.

For cases where you want to fetch and activate values in one call, use fetchAndActivate() as shown in this example:

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

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

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

Because these updated parameter values affect the behavior and appearance of your app, you should activate the fetched values at a time that ensures a smooth experience for your user, such as the next time that the user opens your app. See Remote Config loading strategies for more information and examples.

Throttling

If an app fetches too many times in a short time period, fetch calls may be throttled. In such cases, the SDK throws a FETCH_THROTTLE error. You are recommended to catch this error and retry in exponential backoff mode, waiting longer intervals between subsequent fetch requests.

During app development, you might want to refresh the cache very frequently (many times per hour) to let you rapidly iterate as you develop and test your app. To accommodate rapid iteration on a project with numerous developers, you can temporarily add a property with a low minimum fetch interval ( Settings.minimumFetchIntervalMillis ) in your app.

The default and recommended production fetch interval for Remote Config is 12 hours, which means that configs won't be fetched from the backend more than once in a 12 hour window, regardless of how many fetch calls are actually made. Specifically, the minimum fetch interval is determined in the following order:

1. The parameter in Settings.minimumFetchIntervalMillis .
2. The default value of 12 hours.

Next steps

If you haven't already, explore the Remote Config use cases , and take a look at some of the key concepts and advanced strategies documentation, including:

• Manage Remote Config template versions
• Config loading strategies