เริ่มต้นใช้งานการกำหนดค่าระยะไกลบนเว็บ

คุณสามารถใช้ 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();

ออบเจ็กต์นี้ใช้เพื่อจัดเก็บค่าพารามิเตอร์เริ่มต้นในแอป ดึงค่าพารามิเตอร์ที่อัปเดต จากแบ็กเอนด์ Remote Config และควบคุมเวลาที่จะทำให้ค่าที่ดึงมาพร้อมใช้งานในแอป

ขั้นตอนที่ 2: กำหนดช่วงเวลาดึงข้อมูลขั้นต่ำ

ในระหว่างการพัฒนา เราขอแนะนำให้กำหนดช่วงเวลาดึงข้อมูลขั้นต่ำที่ค่อนข้างต่ำ ดูข้อมูลเพิ่มเติมได้ที่ การควบคุม

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

remoteConfig.settings.minimumFetchIntervalMillis = 3600000;
index.js

ขั้นตอนที่ 3: กำหนดค่าพารามิเตอร์เริ่มต้นในแอป

คุณสามารถกำหนดค่าพารามิเตอร์เริ่มต้นในแอปในRemote Config ออบเจ็กต์ เพื่อให้แอปทำงานตามที่ต้องการก่อนที่จะเชื่อมต่อกับ Remote Configแบ็กเอนด์ และเพื่อให้ค่าเริ่มต้นพร้อมใช้งานในกรณีที่ไม่ได้ ตั้งค่าไว้ในแบ็กเอนด์

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

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

หากกำหนดค่าพารามิเตอร์แบ็กเอนด์ Remote Config ไว้แล้ว คุณ สามารถดาวน์โหลดไฟล์ JSON ที่สร้างขึ้นซึ่งมีค่าเริ่มต้นทั้งหมดและรวม ไว้ใน 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

gcloud auth print-access-token

ตัวอย่างต่อไปนี้แสดง 2 วิธีที่แตกต่างกันในการนำเข้าและตั้งค่าเริ่มต้นในแอป ตัวอย่างแรกใช้ fetch ซึ่งจะส่งคำขอ HTTP ไปยังไฟล์เริ่มต้นที่รวมอยู่ใน App Bundle

  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: รับค่าพารามิเตอร์สำหรับใช้ในแอป

ตอนนี้คุณรับค่าพารามิเตอร์จากออบเจ็กต์ Remote Config ได้แล้ว หากตั้งค่าในแบ็กเอนด์ในภายหลัง ให้ดึงข้อมูลและเปิดใช้งานค่าเหล่านั้นเพื่อให้แอปใช้ได้ หากต้องการรับค่าเหล่านี้ ให้เรียกใช้เมธอด 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 หรือ API แบ็กเอนด์ Remote Config ส่วนนี้จะแนะนำขั้นตอนในคอนโซล เพื่อสร้างค่าเหล่านี้Firebase

1. ในคอนโซล Firebase เปิดโปรเจ็กต์
2. เลือก Remote Config จากเมนูเพื่อดูแดชบอร์ดRemote Config
3. กำหนดพารามิเตอร์ที่มีชื่อเดียวกับพารามิเตอร์ที่คุณกำหนดไว้ในแอป สำหรับพารามิเตอร์แต่ละรายการ คุณสามารถตั้งค่าเริ่มต้น (ซึ่งจะลบล้างค่าเริ่มต้นในแอปในที่สุด) และตั้งค่าแบบมีเงื่อนไขได้ด้วย ดูข้อมูลเพิ่มเติมได้ที่ Remote Config พารามิเตอร์และ เงื่อนไข

4. หากใช้เงื่อนไขสัญญาณที่กำหนดเอง ให้กำหนดแอตทริบิวต์และค่าของแอตทริบิวต์ ตัวอย่างต่อไปนี้แสดงวิธีกำหนดเงื่อนไขสัญญาณที่กำหนดเอง

     let customSignals = {
        "city": "Tokyo",
        "preferred_event_category": "sports"
     }
   
     setCustomSignals(config, customSignals);

ขั้นตอนที่ 6: ดึงข้อมูลและเปิดใช้งานค่า

1. หากต้องการดึงค่าพารามิเตอร์จากแบ็กเอนด์ Remote Config ให้เรียกใช้เมธอด 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

เนื่องจากค่าพารามิเตอร์ที่อัปเดตเหล่านี้ส่งผลต่อลักษณะการทำงานและรูปลักษณ์ของ แอป คุณจึงควรเปิดใช้งานค่าที่ดึงมาในเวลาที่ผู้ใช้จะได้รับประสบการณ์การใช้งานที่ราบรื่น เช่น ครั้งต่อไปที่ผู้ใช้เปิดแอป ดูข้อมูลเพิ่มเติมและตัวอย่างได้ที่กลยุทธ์การโหลดการกำหนดค่าระยะไกล

ขั้นตอนที่ 7: รับฟังการอัปเดตแบบเรียลไทม์

หลังจากดึงค่าพารามิเตอร์แล้ว คุณสามารถใช้ Remote Config แบบเรียลไทม์เพื่อ รับฟังการอัปเดตจากแบ็กเอนด์ Remote Config ได้ เรียลไทม์ Remote Configจะส่งสัญญาณไปยังอุปกรณ์ที่เชื่อมต่อเมื่อมีการอัปเดต และ ดึงข้อมูลการเปลี่ยนแปลงโดยอัตโนมัติหลังจากที่คุณเผยแพร่Remote Config เวอร์ชันใหม่

1. ในแอป ให้ใช้ onConfigUpdate เพื่อเริ่มรับฟังการอัปเดตและดึงค่าพารามิเตอร์ใหม่โดยอัตโนมัติ ติดตั้งใช้งานการเรียกกลับ next เพื่อเปิดใช้งานการกำหนดค่าที่อัปเดต

     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.");
        }
     });

2. ครั้งต่อไปที่คุณเผยแพร่ Remote Config เวอร์ชันใหม่ อุปกรณ์ ที่เรียกใช้แอปและรับฟังการเปลี่ยนแปลงจะเรียกใช้ตัวแฮนเดิลการดำเนินการให้เสร็จสมบูรณ์

การควบคุม

หากแอปดึงข้อมูลหลายครั้งเกินไปในช่วงระยะเวลาสั้นๆ ระบบอาจควบคุมการเรียกใช้การดึงข้อมูล ในกรณีดังกล่าว SDK จะแสดงข้อผิดพลาด FETCH_THROTTLE เราขอแนะนำให้คุณตรวจหาข้อผิดพลาดนี้และลองอีกครั้งในโหมด Exponential Backoff โดยรอช่วงเวลาที่นานขึ้นระหว่างคำขอการดึงข้อมูลที่ตามมา

ในระหว่างการพัฒนาแอป คุณอาจต้องการรีเฟรชแคชบ่อยมาก (หลายครั้งต่อชั่วโมง) เพื่อให้คุณทำซ้ำได้อย่างรวดเร็วขณะพัฒนาและทดสอบแอป หากต้องการรองรับการทำซ้ำอย่างรวดเร็วในโปรเจ็กต์ที่มีนักพัฒนาแอปจำนวนมาก คุณสามารถเพิ่มพร็อพเพอร์ตี้ที่มีช่วงเวลาดึงข้อมูลขั้นต่ำต่ำ (Settings.minimumFetchIntervalMillis) ในแอปชั่วคราวได้

ช่วงเวลาดึงข้อมูลเริ่มต้นและที่แนะนำสำหรับการใช้งานจริงของ Remote Config คือ 12 ชั่วโมง ซึ่งหมายความว่าระบบจะไม่ดึงข้อมูลการกำหนดค่าจากแบ็กเอนด์มากกว่า 1 ครั้งในระยะเวลา 12 ชั่วโมง ไม่ว่าจะมีคำขอการดึงข้อมูลเกิดขึ้นจริงกี่ครั้งก็ตาม โดยเฉพาะอย่างยิ่ง ระบบจะกำหนดช่วงเวลาดึงข้อมูลขั้นต่ำตามลำดับต่อไปนี้

1. พารามิเตอร์ใน Settings.minimumFetchIntervalMillis
2. ค่าเริ่มต้น 12 ชั่วโมง