การใช้ส่วนขยายเครื่องมือสร้างแพ็กเกจ Firestore

ส่วนขยาย Firestore Bundle Builder (firestore-bundle-builder) จะทําให้ฟังก์ชัน HTTP ใช้งานได้ ซึ่งจะแสดงชุดข้อมูล Cloud Firestore คุณกำหนดแพ็กเกจในเอกสาร Firestore และส่วนขยายจะแสดงแพ็กเกจข้อมูลไฟล์ไบนารีแบบคงที่ผ่านคำขอ HTTP พร้อมกับกลไกการแคชในตัวต่างๆ โดยใช้ CDN ของ Firebase Hosting หรือ Cloud Storage เมื่อไม่มี Bundle หรือ Bundle ที่มีอยู่หมดอายุแล้ว ฟังก์ชันนี้จะสร้างและแคช Bundle ใหม่ตามต้องการ

หากต้องการใช้ส่วนขยายนี้ คุณต้องสร้างข้อกำหนดของชุดอย่างน้อย 1 รายการใน Firestore โดยใช้แดชบอร์ดผู้ดูแลระบบของส่วนขยายก่อน ข้อกำหนดของชุดข้อมูลคือวิธีที่คุณกำหนดการค้นหาที่มีชื่อ (การค้นหาคอลเล็กชันและเส้นทางเอกสารที่เฉพาะเจาะจงเพื่อเพิ่มลงในชุดข้อมูล)

นอกจากนี้ คุณยังกำหนดพารามิเตอร์ที่ต้องการใช้ในการค้นหาที่มีชื่อได้ภายในข้อกำหนดของกลุ่ม คุณตั้งค่าพารามิเตอร์เหล่านี้ได้โดยใช้พารามิเตอร์การค้นหาของ URL เมื่อเรียกใช้ฟังก์ชัน HTTP

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

ตัวอย่าง

การสร้างและการแสดงแพ็กเกจ

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

ระบบอาจแสดงผล Bundle ที่ขอจากแคชของไคลเอ็นต์ แคชของ Firebase Hosting หรือไฟล์ Cloud Storage ทั้งนี้ขึ้นอยู่กับข้อกำหนดของ Bundle เมื่อแคชทั้งหมดหมดอายุแล้ว คำขอแสดงผลใหม่จะทริกเกอร์การค้นหา Firestore เพื่อสร้าง Bundle ตามต้องการ

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

หากต้องการตั้งค่านี้ในโฮสติ้งของ Firebase ให้สร้างหรือแก้ไขไฟล์ firebase.json ที่มีเนื้อหาต่อไปนี้ แล้วทําให้เว็บไซต์ใช้งานได้

{
  "hosting": {
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "/bundles/*",
        "function": "ext-firestore-bundle-builder-serve"
      }
    ]
  }
}

เมื่อติดตั้งใช้งานแล้ว คุณจะเข้าถึงแพ็กเกจจาก CDN ได้โดยใช้ URL ของเว็บไซต์ ตัวอย่างเช่น https://your-site-url.com/bundles/:bundleId

หรือคุณจะกำหนดค่าส่วนขยายให้แคชข้อมูลใน Cloud Storage ก็ได้หากไม่ต้องการใช้ Firebase Hosting ในกรณีนี้ คุณจะต้องเรียกใช้ฟังก์ชัน HTTP ที่ติดตั้งใช้งานโดยตรงเพื่อสร้างชุด

การผสานรวมไคลเอ็นต์

จากนั้นคุณจะใช้ Bundle ด้วย loadBundle API ของ Cloud Firestore SDK ได้ โดยต้องดาวน์โหลด Bundle ก่อน แล้วจึงส่งให้ SDK เช่น

import { loadBundle } from "firebase/firestore";

// Download the bundle from the Firebase Hosting CDN:
const bundle = await fetch("/bundles/:bundleId");

// If not using a CDN, download the bundle directly:
// const bundle = await fetch('https://<location>-<project-id>.cloudfunctions.net/ext-firestore-bundle-builder-serve/:bundleId');

await loadBundle(bundle);

เมื่อโหลดแล้ว คุณจะใช้ข้อมูลจากแพ็กเกจได้โดยทำดังนี้

หากระบุอาร์เรย์ของเส้นทางเอกสารเมื่อกำหนดชุด คุณจะรับข้อมูลเอกสารในไคลเอ็นต์ผ่านชุดได้โดยทำดังนี้

import { getFirestore, doc, getDocFromCache } from "firebase/firestore";
// Bundle Document IDs: ['users/92x1NgSWYKUC4AG4s2nHGMR2ikZ2']

const ref = doc(getFirestore(), "users/92x1NgSWYKUC4AG4s2nHGMR2ikZ2");
const snapshot = await getDocFromCache(ref);

หากระบุการค้นหาไว้ คุณจะใช้ API ของ namedQuery เพื่อเรียกใช้การค้นหาจากชุดข้อมูลได้

import { getFirestore, namedQuery } from "firebase/firestore";
const query = await namedQuery(getFirestore(), "queryId");
const snapshot = await getDocsFromCache(query);

รหัสการค้นหาจะกำหนดเป็นคีย์ของคำจำกัดความพร็อพเพอร์ตี้ queries แต่ละรายการ (ดูด้านล่าง)