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

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

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

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

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

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

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

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

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

ขั้นตอนต่อไปคุณจะใช้แพ็กเกจที่มี loadBundle API ของ Cloud Firestore SDK ได้ ก่อนอื่นต้องดาวน์โหลดแพ็กเกจ แล้วจึงส่งไปยัง 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 แต่ละรายการ (ดูด้านล่าง)