เรียนรู้เพิ่มเติมเกี่ยวกับเว็บและ Firebase

ขณะที่คุณกำลังพัฒนาเว็บแอปโดยใช้ 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
  • สำหรับจาวาสคริปต์
  • สำหรับ Node.js
  • สำหรับจาวาสคริปต์
  • สำหรับ Node.js
CDN (เครือข่ายการจัดส่งเนื้อหา)
  • สำหรับจาวาสคริปต์
  • สำหรับจาวาสคริปต์
โฮสติ้ง URL
  • สำหรับจาวาสคริปต์
  • สำหรับ Node.js

สำหรับข้อมูลเพิ่มเติม โปรดดู วิธีเพิ่ม 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 เป็นโมดูล ให้ทำตามขั้นตอนเหล่านี้เพื่อเลื่อนการโหลด:

  1. เพิ่มแฟล็ก 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>

  2. สร้างไฟล์ 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();
app_default_init_options.js

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();
firebaseapp.js

แม้ว่าบางครั้ง คุณต้องเข้าถึงโปรเจ็กต์ 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);
app_multi_project_init_options.js

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();
firebaseapp.js

เรียกใช้เว็บเซิร์ฟเวอร์ในพื้นที่สำหรับการพัฒนา

หากคุณกำลังสร้างเว็บแอป Firebase JavaScript SDK บางส่วนกำหนดให้คุณให้บริการเว็บแอปจากเซิร์ฟเวอร์ แทนที่จะให้บริการจากระบบไฟล์ในเครื่อง คุณสามารถใช้ Firebase CLI เพื่อเรียกใช้เซิร์ฟเวอร์ภายในเครื่องได้

หากคุณตั้งค่าโฮสติ้ง Firebase สำหรับแอปแล้ว คุณอาจทำตามขั้นตอนด้านล่างหลายขั้นตอนแล้ว

ในการให้บริการเว็บแอป คุณจะต้องใช้ Firebase CLI ซึ่งเป็นเครื่องมือบรรทัดคำสั่ง

  1. ไปที่เอกสาร Firebase CLI เพื่อเรียนรู้วิธี ติดตั้ง CLI หรือ อัปเดตเป็นเวอร์ชันล่าสุด

  2. เริ่มต้นโครงการ Firebase ของคุณ เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเร็กทอรีแอปในเครื่องของคุณ:

    firebase init

  3. เริ่มเซิร์ฟเวอร์ภายใน สำหรับการพัฒนา เรียกใช้คำสั่งต่อไปนี้จากรูทของไดเร็กทอรีแอปในเครื่องของคุณ:

    firebase serve

ทรัพยากรโอเพ่นซอร์สสำหรับ Firebase JavaScript SDK

Firebase สนับสนุนการพัฒนาโอเพ่นซอร์ส และเราสนับสนุนการสนับสนุนและข้อเสนอแนะจากชุมชน

Firebase JavaScript SDK

Firebase JavaScript SDK ส่วนใหญ่ได้รับการพัฒนาเป็นไลบรารีโอเพ่นซอร์สใน ที่เก็บ Firebase GitHub สาธารณะของเรา

ตัวอย่างการเริ่มต้นอย่างรวดเร็ว

Firebase เก็บรักษาคอลเลกชันของตัวอย่างการเริ่มต้นอย่างรวดเร็วสำหรับ Firebase API ส่วนใหญ่บนเว็บ ค้นหาการเริ่มต้นอย่างรวดเร็วเหล่านี้ใน ที่เก็บการเริ่มต้นอย่างรวดเร็วของ Firebase GitHub สาธารณะของเรา คุณสามารถใช้การเริ่มต้นอย่างรวดเร็วเหล่านี้เป็นโค้ดตัวอย่างสำหรับการใช้ Firebase SDK