ขณะที่คุณกำลังพัฒนาเว็บแอปโดยใช้ Firebase คุณอาจพบกับแนวคิดที่ไม่คุ้นเคย หรือพื้นที่ที่คุณต้องการข้อมูลเพิ่มเติมเพื่อทำการตัดสินใจที่ถูกต้องสำหรับโครงการของคุณ หน้านี้มีจุดประสงค์เพื่อตอบคำถามเหล่านั้นหรือนำคุณไปยังแหล่งข้อมูลเพื่อเรียนรู้เพิ่มเติม
หากคุณมีคำถามเกี่ยวกับหัวข้อที่ไม่ครอบคลุมในหน้านี้ โปรดไปที่ ชุมชนออนไลน์ ของเรา นอกจากนี้ เราจะอัปเดตหน้านี้ด้วยหัวข้อใหม่ๆ เป็นระยะ ดังนั้นโปรดกลับมาตรวจสอบเพื่อดูว่าเราได้เพิ่มหัวข้อที่คุณต้องการเรียนรู้หรือไม่
เวอร์ชัน SDK: เนมสเปซและโมดูลาร์
Firebase มีพื้นผิว API สองแบบสำหรับเว็บแอป:
- JavaScript - เนมสเปซ นี่คืออินเทอร์เฟซ JavaScript ที่ Firebase ดูแลมาเป็นเวลาหลายปีและเป็นที่คุ้นเคยสำหรับนักพัฒนาเว็บที่ใช้แอป Firebase รุ่นเก่า เนื่องจาก API แบบเนมสเปซไม่ได้รับประโยชน์จากการสนับสนุนคุณสมบัติใหม่อย่างต่อเนื่อง แอพใหม่ส่วนใหญ่จึงควรใช้ API แบบโมดูลาร์แทน
- JavaScript - โมดูลาร์ SDK นี้ใช้วิธีการแบบแยกส่วนซึ่งลดขนาด SDK ลงและเพิ่มประสิทธิภาพด้วยเครื่องมือสร้าง JavaScript ที่ทันสมัย เช่น webpack หรือ Rollup
API แบบโมดูลาร์ผสานรวมได้ดีกับเครื่องมือสร้างที่แยกโค้ดที่ไม่ได้ใช้ในแอปของคุณ ซึ่งเป็นกระบวนการที่เรียกว่า "การเขย่าต้นไม้" แอปที่สร้างด้วย SDK นี้จะได้รับประโยชน์จากขนาดที่ลดลงอย่างมาก แม้ว่า API แบบเนมสเปซจะมีให้ใช้เป็นโมดูล แต่ก็ไม่มีโครงสร้างแบบโมดูลาร์อย่างเคร่งครัดและไม่ได้ลดขนาดลงในระดับเดียวกัน
แม้ว่า API แบบโมดูลาร์ส่วนใหญ่จะใช้รูปแบบเดียวกันกับ API ที่มีเนมสเปซ แต่การจัดระเบียบของรหัสนั้นแตกต่างกัน โดยทั่วไป เนมสเปซ API จะมุ่งเน้นไปที่เนมสเปซและรูปแบบบริการ ในขณะที่โมดูลาร์ API จะมุ่งเน้นไปที่ฟังก์ชันแยก ตัวอย่างเช่น การผูกดอทเชนของ API เนมสเปซ เช่น firebaseApp.auth()
จะถูกแทนที่ใน API แบบแยกส่วนด้วยฟังก์ชัน getAuth()
เดียวที่รับ firebaseApp
และส่งคืนอินสแตนซ์การตรวจสอบสิทธิ์
ซึ่งหมายความว่าเว็บแอปที่สร้างด้วยเนมสเปซ API จำเป็นต้องปรับโครงสร้างใหม่เพื่อใช้ประโยชน์จากการออกแบบแอปแบบโมดูลาร์ ดู คู่มือการอัปเกรด สำหรับรายละเอียดเพิ่มเติม
รองรับอะไรบ้าง?
แม้ว่า API แบบเนมสเปซและ API แบบโมดูลาร์จะมีสไตล์โค้ดที่แตกต่างกัน แต่ก็ให้การสนับสนุนคุณสมบัติและตัวเลือก Firebase ที่คล้ายคลึงกันมาก ดังที่เราจะอธิบายโดยละเอียดในคู่มือนี้ SDK ทั้งสองเวอร์ชันรองรับ JavaScript และ Node.js ที่หลากหลาย พร้อมด้วยตัวเลือกมากมายสำหรับการเพิ่ม/ติดตั้ง SDK
เพิ่ม SDK ด้วย | เนมสเปซ | โมดูลาร์ |
---|---|---|
npm |
|
|
CDN (เครือข่ายการจัดส่งเนื้อหา) |
|
|
โฮสติ้ง URL |
|
สำหรับข้อมูลเพิ่มเติม โปรดดู วิธีเพิ่ม Web SDK ลงในแอปของคุณ และ รูปแบบต่างๆ ของ Firebase Web SDK ในภายหลังในหน้านี้
JavaScript - API แบบแยกส่วนสำหรับแอปใหม่
หากคุณกำลังเริ่มต้นการรวมระบบใหม่กับ Firebase คุณสามารถเลือกใช้ API แบบแยกส่วนได้เมื่อคุณ เพิ่มและเริ่มต้น SDK
ในขณะที่คุณพัฒนาแอป โปรดทราบว่าโค้ดของคุณจะถูกจัดระเบียบตาม ฟังก์ชันต่างๆ เป็นหลัก ใน API แบบแยกส่วน บริการจะถูกส่งผ่านเป็นอาร์กิวเมนต์แรก จากนั้นฟังก์ชันจะใช้รายละเอียดของบริการเพื่อดำเนินการส่วนที่เหลือ ตัวอย่างเช่น:
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
สำหรับตัวอย่างและรายละเอียดเพิ่มเติม โปรดดูคู่มือสำหรับแต่ละผลิตภัณฑ์ รวมถึง เอกสารอ้างอิง API แบบแยกส่วน
วิธีเพิ่ม Web SDK ลงในแอปของคุณ
Firebase มีไลบรารี JavaScript สำหรับผลิตภัณฑ์ Firebase ส่วนใหญ่ รวมถึง Remote Config, FCM และอื่นๆ วิธีเพิ่ม Firebase SDK ลงในเว็บแอปขึ้นอยู่กับเครื่องมือที่คุณใช้กับแอป (เช่น โมดูลบันเดิล) หรือแอปทำงานในสภาพแวดล้อมที่ไม่ใช่เบราว์เซอร์ เช่น Node.js
คุณสามารถเพิ่ม ไลบรารีใด ๆ ที่มีอยู่ ในแอปของคุณผ่านหนึ่งในวิธีการที่รองรับ:
- npm (สำหรับโมดูลบันเดิลและ Node.js)
- CDN (เครือข่ายการจัดส่งเนื้อหา)
สำหรับคำแนะนำในการตั้งค่าโดยละเอียด โปรดดูที่ เพิ่ม Firebase ในแอป JavaScript ของคุณ ส่วนที่เหลือของส่วนนี้มีข้อมูลเพื่อช่วยคุณเลือกจากตัวเลือกที่มีอยู่
npm
การดาวน์โหลดแพ็คเกจ Firebase npm (ซึ่งมีทั้งเบราว์เซอร์และบันเดิล Node.js) จะให้สำเนา Firebase SDK ในเครื่องแก่คุณ ซึ่งอาจจำเป็นสำหรับแอปพลิเคชันที่ไม่ใช่เบราว์เซอร์ เช่น แอป Node.js, React Native หรือ Electron การดาวน์โหลดประกอบด้วย Node.js และ React Native Bundles เป็นตัวเลือกสำหรับบางแพ็คเกจ บันเดิล Node.js จำเป็นสำหรับขั้นตอนการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) ของเฟรมเวิร์ก SSR
การใช้ npm กับโมดูลบันเดิล เช่น webpack หรือ Rollup จะให้ตัวเลือกในการเพิ่มประสิทธิภาพเพื่อ "tree-shake" โค้ดที่ไม่ได้ใช้ และใช้ polyfills เป้าหมาย ซึ่งสามารถลดขนาดรอยเท้าของแอปของคุณได้อย่างมาก การใช้คุณสมบัติเหล่านี้อาจเพิ่มความซับซ้อนให้กับการกำหนดค่าและห่วงโซ่การสร้างของคุณ แต่เครื่องมือ CLI หลักต่างๆ สามารถช่วยลดปัญหาดังกล่าวได้ เครื่องมือเหล่านี้ประกอบด้วย Angular , React , Vue , Next และอื่น ๆ
สรุป:
- ให้การเพิ่มประสิทธิภาพขนาดแอปที่มีคุณค่า
- มีเครื่องมือที่แข็งแกร่งสำหรับจัดการโมดูล
- จำเป็นสำหรับ SSR กับ Node.js
CDN (เครือข่ายการจัดส่งเนื้อหา)
การเพิ่มไลบรารีที่จัดเก็บไว้ใน CDN ของ Firebase เป็นวิธีการตั้งค่า SDK อย่างง่ายที่นักพัฒนาหลายคนอาจคุ้นเคย เมื่อใช้ CDN เพื่อเพิ่ม SDK คุณไม่จำเป็นต้องใช้เครื่องมือสร้าง และห่วงโซ่การสร้างของคุณอาจมีแนวโน้มที่จะทำงานได้ง่ายขึ้นและง่ายกว่าเมื่อเทียบกับชุดรวมโมดูล หากคุณไม่กังวลเป็นพิเศษเกี่ยวกับขนาดที่ติดตั้งของแอป และไม่มีข้อกำหนดพิเศษ เช่น การทรานสไพล์จาก TypeScript ดังนั้น CDN อาจเป็นตัวเลือกที่ดี
สรุป:
- คุ้นเคยและเรียบง่าย
- เหมาะสมเมื่อขนาดแอปไม่ใช่ประเด็นหลัก
- เหมาะสมเมื่อเว็บไซต์ของคุณไม่ใช้เครื่องมือสร้าง
ตัวแปร Firebase Web SDK
ปัจจุบัน Firebase มี Web SDK สองแบบ:
- ชุด JavaScript ที่รองรับคุณสมบัติ Firebase ทั้งหมดสำหรับใช้ในเบราว์เซอร์
- กลุ่ม Node.js ฝั่งไคลเอ็นต์ที่รองรับฟีเจอร์ Firebase มากมาย แต่ไม่ใช่ทั้งหมด ดูรายการ สภาพแวดล้อมที่รองรับ
ตัวแปร SDK ทั้งสองนี้ออกแบบมาเพื่อช่วยสร้างเว็บแอปหรือแอปไคลเอนต์สำหรับการเข้าถึงของผู้ใช้ปลายทาง เช่น ในเดสก์ท็อป Node.js หรือแอปพลิเคชัน IoT หากเป้าหมายของคุณคือการตั้งค่าการเข้าถึงระดับผู้ดูแลระบบจากสภาพแวดล้อมที่มีสิทธิพิเศษ (เช่น เซิร์ฟเวอร์) ให้ใช้ Firebase Admin SDK แทน
การตรวจจับสภาพแวดล้อมด้วยบันเดิลและเฟรมเวิร์ก
เมื่อคุณติดตั้ง Firebase Web SDK โดยใช้ npm ระบบจะติดตั้งทั้งเวอร์ชัน JavaScript และ Node.js แพ็คเกจมีการตรวจจับสภาพแวดล้อมโดยละเอียดเพื่อเปิดใช้งานบันเดิลที่เหมาะสมสำหรับแอปพลิเคชันของคุณ
หากโค้ดของคุณใช้คำ require
Node.js SDK จะค้นหาบันเดิลเฉพาะโหนด มิฉะนั้น การตั้งค่า Bundler ของคุณต้องได้รับการคิดอย่างถูกต้องเพื่อตรวจหาฟิลด์จุดเข้าใช้งานที่ถูกต้องในไฟล์ package.json
ของคุณ (เช่น main
, browser
หรือ module
) หากคุณพบข้อผิดพลาดรันไทม์กับ SDK ให้ตรวจสอบเพื่อให้แน่ใจว่า Bundler ของคุณได้รับการกำหนดค่าให้จัดลำดับความสำคัญของประเภท Bundle ที่ถูกต้องสำหรับสภาพแวดล้อมของคุณ
เรียนรู้เกี่ยวกับออบเจกต์การกำหนดค่า Firebase
หากต้องการเริ่มต้น Firebase ในแอป คุณต้องระบุการกำหนดค่าโปรเจ็กต์ Firebase ของแอป คุณสามารถ รับออบเจกต์การกำหนดค่า Firebase ได้ทุกเมื่อ
เราไม่แนะนำให้แก้ไขออบเจกต์การกำหนดค่าของคุณด้วยตนเอง โดยเฉพาะ "ตัวเลือก Firebase" ที่จำเป็นต่อไปนี้:
apiKey
,projectId
และappID
หากคุณเริ่มต้นแอปด้วยค่าที่ไม่ถูกต้องหรือไม่มีค่าสำหรับ "ตัวเลือก Firebase" ที่จำเป็นเหล่านี้ ผู้ใช้แอปของคุณอาจประสบปัญหาร้ายแรงหากคุณเปิดใช้ Google Analytics ในโครงการ Firebase ออบเจ็กต์การกำหนดค่าของคุณจะมีฟิลด์
measurementId
เรียนรู้เพิ่มเติมเกี่ยวกับฟิลด์นี้ใน หน้าเริ่มต้นใช้งาน Analyticsหากคุณเปิดใช้ Google Analytics หรือฐานข้อมูลเรียลไทม์ หลังจากที่ คุณสร้าง Firebase Web App ตรวจสอบให้แน่ใจว่าออบเจ็กต์การกำหนดค่า Firebase ที่คุณใช้ในแอปได้รับการอัปเดตด้วยค่าการกำหนดค่าที่เกี่ยวข้อง (
measurementId
และdatabaseURL
ตามลำดับ) คุณสามารถ รับออบเจกต์การกำหนดค่า Firebase ได้ทุกเมื่อ
นี่คือรูปแบบของวัตถุกำหนดค่าที่เปิดใช้งานบริการทั้งหมด (ค่าเหล่านี้จะถูกเติมโดยอัตโนมัติ):
var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", // The value of `databaseURL` depends on the location of the database databaseURL: "https://DATABASE_NAME.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field measurementId: "G-MEASUREMENT_ID", };
ห้องสมุดที่มีอยู่
ตัวเลือกการตั้งค่าเพิ่มเติม
การโหลด Firebase SDK ล่าช้า (จาก CDN)
คุณสามารถชะลอการรวม Firebase SDK ได้จนกว่าจะโหลดทั้งหน้า หากคุณใช้สคริปต์ CDN เวอร์ชัน 9 กับ <script type="module">
นี่เป็นลักษณะการทำงานเริ่มต้น หากคุณใช้สคริปต์ CDN เวอร์ชัน 8 เป็นโมดูล ให้ทำตามขั้นตอนเหล่านี้เพื่อเลื่อนการโหลด:
เพิ่มแฟล็ก
defer
ไปยังแต่ละscript
สำหรับ Firebase SDK จากนั้นเลื่อนการเริ่มต้นของ Firebase โดยใช้สคริปต์ที่สอง เช่น<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>
สร้างไฟล์
init-firebase.js
จากนั้นรวมสิ่งต่อไปนี้ในไฟล์:// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
ใช้โปรเจ็กต์ Firebase หลายโปรเจ็กต์ในแอปเดียว
ในกรณีส่วนใหญ่ คุณต้องเริ่มต้น Firebase ในแอปเริ่มต้นเพียงแอปเดียวเท่านั้น คุณสามารถเข้าถึง Firebase จากแอปนั้นได้สองวิธีที่เทียบเท่ากัน:
Web modular API
import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a "default" Firebase project const defaultProject = initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = getStorage(defaultProject); let defaultFirestore = getFirestore(defaultProject); // Option 2: Access Firebase services using shorthand notation defaultStorage = getStorage(); defaultFirestore = getFirestore();
Web namespaced API
// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let defaultFirestore = defaultProject.firestore(); // Option 2: Access Firebase services using shorthand notation defaultStorage = firebase.storage(); defaultFirestore = firebase.firestore();
แม้ว่าบางครั้ง คุณต้องเข้าถึงโปรเจ็กต์ Firebase หลายโปรเจ็กต์พร้อมกัน ตัวอย่างเช่น คุณอาจต้องการอ่านข้อมูลจากฐานข้อมูลของโปรเจ็กต์ Firebase หนึ่ง แต่เก็บไฟล์ไว้ในโปรเจ็กต์ Firebase อื่น หรือคุณอาจต้องการตรวจสอบสิทธิ์โครงการหนึ่งโดยที่ไม่ต้องตรวจสอบสิทธิ์โครงการที่สอง
Firebase JavaScript SDK ช่วยให้คุณเริ่มต้นและใช้โปรเจ็กต์ Firebase หลายโปรเจ็กต์ในแอปเดียวได้พร้อมกัน โดยแต่ละโปรเจ็กต์จะใช้ข้อมูลการกำหนดค่า Firebase ของตัวเอง
Web modular API
import { initializeApp, getApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a default Firebase project initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = initializeApp(otherProjectFirebaseConfig, "other"); console.log(getApp().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = getStorage(); const defaultFirestore = getFirestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = getStorage(otherProject); const otherFirestore = getFirestore(otherProject);
Web namespaced API
// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other"); console.log(firebase.app().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();
เรียกใช้เว็บเซิร์ฟเวอร์ในพื้นที่สำหรับการพัฒนา
หากคุณกำลังสร้างเว็บแอป Firebase JavaScript SDK บางส่วนกำหนดให้คุณให้บริการเว็บแอปจากเซิร์ฟเวอร์ แทนที่จะให้บริการจากระบบไฟล์ในเครื่อง คุณสามารถใช้ Firebase CLI เพื่อเรียกใช้เซิร์ฟเวอร์ภายในเครื่องได้
หากคุณตั้งค่าโฮสติ้ง Firebase สำหรับแอปแล้ว คุณอาจทำตามขั้นตอนด้านล่างหลายขั้นตอนแล้ว
ในการให้บริการเว็บแอป คุณจะต้องใช้ Firebase CLI ซึ่งเป็นเครื่องมือบรรทัดคำสั่ง
ไปที่เอกสาร Firebase CLI เพื่อเรียนรู้วิธี ติดตั้ง CLI หรือ อัปเดตเป็นเวอร์ชันล่าสุด
เริ่มต้นโครงการ Firebase ของคุณ เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเร็กทอรีแอปในเครื่องของคุณ:
firebase init
เชื่อมโยงไดเรกทอรีแอปในเครื่องของคุณกับ Firebase
สร้าง ไฟล์
firebase.json
(ไฟล์ที่จำเป็นสำหรับการโฮสต์ Firebase)แจ้งให้คุณระบุไดเรกทอรีรากสาธารณะซึ่งมีไฟล์สแตติกสาธารณะของคุณ (HTML, CSS, JS เป็นต้น)
ชื่อเริ่มต้นสำหรับไดเรกทอรีที่ Firebase ค้นหาคือ "สาธารณะ" คุณยังสามารถ ตั้งค่าไดเร็กทอรีสาธารณะ ในภายหลังโดยแก้ไขไฟล์
firebase.json
ของคุณโดยตรง
เริ่มเซิร์ฟเวอร์ภายใน สำหรับการพัฒนา เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเร็กทอรีแอปในเครื่องของคุณ:
firebase serve
ทรัพยากรโอเพ่นซอร์สสำหรับ Firebase JavaScript SDK
Firebase สนับสนุนการพัฒนาโอเพ่นซอร์ส และเราสนับสนุนการสนับสนุนและข้อเสนอแนะจากชุมชน
Firebase JavaScript SDK
Firebase JavaScript SDK ส่วนใหญ่ได้รับการพัฒนาเป็นไลบรารีโอเพ่นซอร์สใน ที่เก็บ Firebase GitHub สาธารณะของเรา
ตัวอย่างการเริ่มต้นอย่างรวดเร็ว
Firebase เก็บรักษาคอลเลกชันของตัวอย่างการเริ่มต้นอย่างรวดเร็วสำหรับ Firebase API ส่วนใหญ่บนเว็บ ค้นหาการเริ่มต้นอย่างรวดเร็วเหล่านี้ใน ที่เก็บการเริ่มต้นอย่างรวดเร็วของ Firebase GitHub สาธารณะของเรา คุณสามารถใช้การเริ่มต้นอย่างรวดเร็วเหล่านี้เป็นโค้ดตัวอย่างสำหรับการใช้ Firebase SDK