แนวทางปฏิบัติแนะนำสำหรับ Firebase JavaScript SDK

หน้านี้มีเคล็ดลับและการแก้ปัญหาเกี่ยวกับปัญหา JavaScript ที่คุณอาจ พบเมื่อใช้ Firebase JavaScript SDK

หากพบความท้าทายอื่นๆ หรือไม่เห็นปัญหาของคุณ โปรดดู ที่ คำถามที่พบบ่อยหลักของ Firebase สำหรับคำถามที่พบบ่อยเกี่ยวกับ Firebase ทั้งหมดหรือ คำถามที่พบบ่อยเฉพาะผลิตภัณฑ์

นอกจากนี้ คุณยังดูรายการปัญหาที่รายงานและการแก้ปัญหาล่าสุดได้ในที่เก็บ GitHub ของ Firebase JavaScript SDKและรายงานปัญหาของคุณเองได้ที่นั่น

Admin SDK สำหรับโครงสร้าง Node.js ไม่เข้ากันกับ Firebase JavaScript SDK

Firebase Admin SDK สำหรับ Node.js และ Firebase JavaScript SDK เป็นการติดตั้งใช้งานที่แตกต่างกัน ซึ่งไม่ได้แชร์อินเทอร์เฟซ คลาส หรือคำจำกัดความของฟังก์ชัน อินสแตนซ์ของ Admin SDK ออบเจ็กต์ไม่เข้ากันกับ Firebase JavaScript SDK ฟังก์ชัน

ตัวอย่างเช่น อินสแตนซ์ของ Admin SDK's FirebaseApp ที่ส่งไปยัง Firebase JavaScript SDK getDatabase ฟังก์ชันจะทำให้เกิดข้อผิดพลาดต่อไปนี้

TypeError: Cannot read properties of undefined (reading 'getProvider')
 at _getProvider
 at getDatabase

ข้อผิดพลาดนี้เกิดขึ้นกับพื้นผิว API ทั้งหมดของ Firebase JavaScript SDK ไม่ใช่แค่ Realtime Database และยังเกิดขึ้นกับการใช้งานในทิศทางตรงกันข้ามด้วย การพยายามใช้ Cloud Firestore JS SDK's Timestamp ประเภทกับ Firebase Admin SDK สำหรับ Node.js จะทำให้เกิดข้อผิดพลาดที่คล้ายกัน

หลีกเลี่ยงการใช้ Firebase JavaScript SDK เวอร์ชันที่ขัดแย้งกัน

Firebase JavaScript Firebase JavaScript SDK หลายเวอร์ชันที่ขัดแย้งกันซึ่งกำหนดค่าเป็นการอ้างอิง ในโปรเจ็กต์จะทำให้เกิดข้อผิดพลาดรันไทม์เมื่อมีการส่งอินสแตนซ์ SDK ระหว่างแพ็กเกจ SDK ตัวอย่างเช่น การใช้ไลบรารี SQL Connect ที่มี เวอร์ชันของ FirebaseApp ที่ไม่ตรงกันจะทำให้เกิดข้อผิดพลาดต่อไปนี้

Error: Component data-connect has not been registered yet

ปัญหานี้มักเกิดจากการอัปเดตทรัพยากร Dependency ของแพ็กเกจ Firebase SDK บางแพ็กเกจ แต่ไม่ใช่ทั้งหมด สถานการณ์นี้มักเกิดขึ้นเมื่อเครื่องมืออัปเดตทรัพยากร Dependency อัตโนมัติเปลี่ยนทรัพยากร Dependency ของ Firebase SDK บางรายการภายในไฟล์ yarn.lock หรือ package-lock.json ของโปรเจ็กต์ เนื่องจาก Firebase JavaScript SDK หลายรายการทำงานร่วมกัน การใช้ SDK เวอร์ชันต่างๆ จึงทำให้เกิดความไม่เข้ากันรันไทม์

หากต้องการแก้ไขปัญหานี้ ให้ลบไดเรกทอรี node_modules/ และไฟล์ yarn.lock (สำหรับ yarn) หรือ package-lock.json (สำหรับ npm) ในโปรเจ็กต์ แล้วติดตั้งการอ้างอิงใหม่

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

ตัวอย่างเช่น บันทึกต่อไปนี้แสดง package-using-older-firebase ที่นำเข้าเวอร์ชันที่ขัดแย้งกันของ Firebase JavaScript SDK:

$ npm ls firebase --all
your-app@0.0.0
├── firebase@11.2.0
├─┬ @angular/fire@19.0.0
│ ├── firebase@11.2.0 deduped
│ └─┬ rxfire@6.1.0
│   └── firebase@10.14.1 deduped
└─┬ package-using-older-firebase@0.1.0
  └─── firebase@10.14.1

ข้อผิดพลาดอาจเกิดขึ้นจากการผสมคำสั่ง require และ import ในแอป ซึ่งจะสร้าง Firebase JavaScript SDK หลายอินสแตนซ์ ที่แตกต่างกัน ซึ่งจะทำให้การทำงานร่วมกันของ Firebase JavaScript SDK หยุดชะงัก เพิ่มความละเอียดของ Bundler ที่คุณเลือกเพื่อแก้ไขข้อบกพร่องในสถานการณ์นี้ ตัวอย่างเช่น คุณสามารถใช้แฟล็ก esbuild analyze flag เพื่อวัตถุประสงค์นี้ได้

ตรวจสอบว่าได้รวม Service Worker ไว้แล้ว

Service Worker มักสร้างขึ้นจากไปป์ไลน์แยกต่างหากจากส่วนอื่นๆ ของเว็บแอป และไม่ได้รวมอยู่ในการกำหนดค่าเริ่มต้นของ Bundler เช่น Webpack

หากคุณใช้ SDK เวอร์ชันแบบแยกส่วนของ Firebase JavaScript ภายใน Service Worker โปรดตรวจสอบว่าได้กำหนดค่า Bundler ของแอปให้รวมไฟล์ต้นฉบับของ Service Worker แล้ว ตัวอย่างต่อไปนี้ใช้ npx เพื่อรวม Service Worker firebase-sw.js ไว้ในไดเรกทอรี src ของโปรเจ็กต์

npx esbuild ./src/firebase-sw.js --bundle --minify --main-fields=webworker,browser,module,main,default --outfile=public/firebase-sw.js

การเปิดใช้งาน Service Worker ที่ไม่ได้รวมไว้จะล้มเหลวหาก Service Worker นั้นนำเข้าโมดูล ES ที่ไม่รองรับ Service Worker หรือไฟล์ที่ไม่มีอยู่ในขอบเขตของ Service Worker บางครั้งความล้มเหลวเหล่านี้จะเงียบและแก้ไขข้อบกพร่องได้ยาก

ดูข้อมูลเพิ่มเติมเกี่ยวกับการรวม Firebase JavaScript SDK เวอร์ชันแบบแยกส่วนไว้ในแอปได้ที่การใช้ Bundler ของโมดูลกับ Firebase

หรือคุณสามารถไม่จำเป็นต้องรวมโดยการนำเข้าแพ็กเกจ compat Firebase JavaScript SDK จาก CDN ดังนี้

// Give the service worker access to Firebase Messaging.
// Replace 10.13.2 with the version of the Firebase JS SDK you're using
// in your app.
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/10.13.2/firebase-messaging-compat.js');

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
firebase.initializeApp({
  ...
});

// Retrieve an instance of Firebase Messaging so that it can handle
// background messages.
const messaging = firebase.messaging();

ใช้ FirebaseServerApp เมื่อทำงานกับการแสดงผลฝั่งเซิร์ฟเวอร์

เดิมที Firebase JavaScript SDK มีไว้สำหรับทำงานในสภาพแวดล้อมเบราว์เซอร์ การเปิดตัวเฟรมเวิร์กการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) ทำให้การใช้งาน SDK เข้าสู่สภาพแวดล้อมรันไทม์ใหม่ รันไทม์เหล่านี้มีเครื่องมือและ API บางส่วนที่เบราว์เซอร์มี

ตัวอย่างเช่น Firebase SDK บางรายการต้องมีการแคชข้อมูลด้วย IndexedDB ซึ่งเป็น API ที่ใช้ได้เฉพาะในเบราว์เซอร์ การตรวจสอบสิทธิ์ Firebase อาจต้องมีการโต้ตอบของผู้ใช้ในขั้นตอนการลงชื่อเข้าใช้บางขั้นตอน ซึ่งเป็นไปไม่ได้ในสภาพแวดล้อมเซิร์ฟเวอร์แบบไม่มีส่วนหัว App Check อาศัย ฮิวริสติกของเบราว์เซอร์เพื่อตรวจสอบผู้ใช้ก่อนที่จะสร้างโทเค็น App Check

เมื่อทำงานกับ SDK ในสภาพแวดล้อมใหม่เหล่านี้ ให้ใช้ FirebaseServerApp ซึ่งเป็นรูปแบบใหม่ ของ FirebaseApp ที่มีวิธีโหลดอินสแตนซ์ SSR Firebase ล่วงหน้า ด้วยข้อมูลที่รวบรวมจากฝั่งไคลเอ็นต์

FirebaseServerApp รองรับพารามิเตอร์ 2 รายการ ได้แก่

• โทเค็นรหัสผู้ใช้สำหรับการตรวจสอบสิทธิ์: หากระบุไว้ การตรวจสอบสิทธิ์ Firebase จะลงชื่อเข้าใช้ผู้ใช้ที่ตรวจสอบสิทธิ์ไว้ก่อนหน้านี้โดยอัตโนมัติ ซึ่งอาจครอบคลุมเซสชันระหว่าง CSR / SSR
• โทเค็น App Check: หากระบุไว้ SDK อื่นๆ ของ Firebase จะใช้โทเค็นนี้โดยไม่จำเป็นต้องเริ่มต้นอินสแตนซ์ของ App Check ไคลเอ็นต์ (ซึ่งไม่รองรับนอกสภาพแวดล้อมเบราว์เซอร์) ซึ่งจะปลดบล็อกการรองรับ SSR สำหรับผลิตภัณฑ์ที่เปิดใช้ App Check เช่น Cloud Functions, SQL Connect, Cloud Firestore, Realtime Database, และ Vertex AI

ดูตัวอย่างการใช้งาน FirebaseServerApp ใน Next.js ได้ที่ ปรับปรุงการพัฒนาแอป SSR ให้มีประสิทธิภาพมากขึ้นด้วย FirebaseServerApp