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

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

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

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

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

ตัวอย่าง

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

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

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

คุณใช้ประโยชน์จากความสามารถของ 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);

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

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

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