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

ขณะที่คุณกำลังพัฒนาเว็บแอปโดยใช้ Firebase คุณอาจพบกับแนวคิดที่ไม่คุ้นเคย หรือพื้นที่ที่คุณต้องการข้อมูลเพิ่มเติมเพื่อตัดสินใจได้อย่างถูกต้องสำหรับโครงการของคุณ หน้านี้มีวัตถุประสงค์เพื่อตอบคำถามเหล่านั้นหรือนำคุณไปยังแหล่งข้อมูลเพื่อเรียนรู้เพิ่มเติม

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

เวอร์ชัน SDK: เนมสเปซและโมดูลาร์

Firebase มี API ให้เลือก 2 แบบสำหรับเว็บแอป:

  • JavaScript - เนมสเปซ นี่คืออินเทอร์เฟซ JavaScript ที่ Firebase ดูแลมานานหลายปี และนักพัฒนาเว็บคุ้นเคยกับแอป Firebase รุ่นเก่าๆ เนื่องจาก API เนมสเปซไม่ได้รับประโยชน์จากการสนับสนุนคุณลักษณะใหม่อย่างต่อเนื่อง แอปใหม่ส่วนใหญ่จึงควรใช้ API แบบโมดูลาร์แทน
  • จาวาสคริปต์ - โมดูลาร์ . SDK นี้ใช้แนวทางแบบโมดูลาร์ที่ให้ขนาด SDK ลดลงและมีประสิทธิภาพมากขึ้นด้วยเครื่องมือสร้าง JavaScript สมัยใหม่ เช่น webpack หรือ Rollup

API แบบโมดูลาร์ทำงานร่วมกับเครื่องมือสร้างได้ดีซึ่งจะแยกโค้ดที่ไม่ได้ใช้ในแอปของคุณ ซึ่งเป็นกระบวนการที่เรียกว่า "การสั่นแบบต้นไม้" แอปที่สร้างด้วย SDK นี้ได้รับประโยชน์จากขนาดที่ลดลงอย่างมาก API เนมสเปซแม้ว่าจะมีให้ใช้เป็นโมดูล แต่ก็ไม่มีโครงสร้างโมดูลาร์ที่เข้มงวดและไม่ได้ให้การลดขนาดในระดับเดียวกัน

แม้ว่า API แบบโมดูลาร์ส่วนใหญ่จะใช้รูปแบบเดียวกันกับ API เนมสเปซ แต่การจัดระเบียบของโค้ดก็แตกต่างกัน โดยทั่วไป API เนมสเปซจะมุ่งเน้นไปที่เนมสเปซและรูปแบบการบริการ ในขณะที่ API แบบโมดูลาร์จะมุ่งเน้นไปที่ฟังก์ชันที่ไม่ต่อเนื่อง ตัวอย่างเช่น dot-chaining ของ API เนมสเปซ เช่น firebaseApp.auth() จะถูกแทนที่ด้วย API แบบโมดูลาร์ด้วยฟังก์ชัน getAuth() เดียวที่รับ firebaseApp และส่งคืนอินสแตนซ์การตรวจสอบสิทธิ์

ซึ่งหมายความว่าเว็บแอปที่สร้างด้วย API แบบเนมสเปซจำเป็นต้องมีการปรับโครงสร้างใหม่เพื่อใช้ประโยชน์จากการออกแบบแอปแบบแยกส่วน ดู คู่มือการอัพเกรด สำหรับรายละเอียดเพิ่มเติม

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 ส่วนใหญ่ รวมถึงการกำหนดค่าระยะไกล, FCM และอื่นๆ วิธีที่คุณเพิ่ม Firebase SDK ลงในเว็บแอปของคุณขึ้นอยู่กับเครื่องมือที่คุณใช้กับแอปของคุณ (เช่น ชุดรวมโมดูล)

คุณสามารถเพิ่ม ไลบรารีใดๆ ที่มีอยู่ ลงในแอปของคุณได้โดยใช้วิธีใดวิธีหนึ่งที่รองรับ:

  • npm (สำหรับตัวรวมโมดูล)
  • CDN (เครือข่ายการจัดส่งเนื้อหา)

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

เวลา 22.00 น

การดาวน์โหลดแพ็คเกจ Firebase npm (ซึ่งรวมถึงทั้งเบราว์เซอร์และบันเดิล Node.js) จะทำให้คุณได้รับสำเนา Firebase SDK ในเครื่อง ซึ่งอาจจำเป็นสำหรับแอปพลิเคชันที่ไม่ใช่เบราว์เซอร์ เช่น แอป Node.js, React Native หรือ Electron การดาวน์โหลดประกอบด้วยชุด Node.js และ React Native เป็นตัวเลือกสำหรับบางแพ็คเกจ บันเดิล Node.js จำเป็นสำหรับขั้นตอนการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) ของเฟรมเวิร์ก SSR

การใช้ npm กับตัวรวมโมดูล เช่น webpack หรือ Rollup มอบตัวเลือกการเพิ่มประสิทธิภาพให้กับโค้ดที่ไม่ได้ใช้ "การเขย่าต้นไม้" และใช้โพลีฟิลเป้าหมาย ซึ่งสามารถลดขนาดพื้นที่ของแอปของคุณได้อย่างมาก การใช้คุณสมบัติเหล่านี้อาจเพิ่มความซับซ้อนให้กับการกำหนดค่าและเชนการสร้างของคุณ แต่เครื่องมือ CLI หลักต่างๆ สามารถช่วยบรรเทาปัญหาดังกล่าวได้ เครื่องมือเหล่านี้ได้แก่ Angular , React , Vue , Next และอื่นๆ

สรุป:

  • มอบการเพิ่มประสิทธิภาพขนาดแอปที่มีคุณค่า
  • มีเครื่องมือที่แข็งแกร่งสำหรับจัดการโมดูล
  • จำเป็นสำหรับ SSR ที่มี Node.js

CDN (เครือข่ายการจัดส่งเนื้อหา)

การเพิ่มไลบรารีที่จัดเก็บไว้ใน CDN ของ Firebase เป็นวิธีการตั้งค่า SDK แบบง่ายๆ ที่นักพัฒนาหลายคนอาจคุ้นเคย เมื่อใช้ CDN เพื่อเพิ่ม SDK คุณไม่จำเป็นต้องใช้เครื่องมือสร้าง และห่วงโซ่การสร้างของคุณอาจมีแนวโน้มที่จะง่ายกว่าและทำงานง่ายกว่าเมื่อเปรียบเทียบกับชุดรวมโมดูล หากคุณไม่กังวลเป็นพิเศษเกี่ยวกับขนาดแอปที่ติดตั้งและไม่มีข้อกำหนดพิเศษ เช่น การทรานส์ไพล์จาก TypeScript CDN อาจเป็นตัวเลือกที่ดี

สรุป:

  • คุ้นเคยและเรียบง่าย
  • เหมาะสมเมื่อขนาดแอปไม่ใช่ปัญหาหลัก
  • เหมาะสมเมื่อเว็บไซต์ของคุณไม่ได้ใช้เครื่องมือสร้าง

ตัวแปร Firebase Web SDK

Web SDK ของ Firebase สามารถใช้ได้ทั้งในเบราว์เซอร์และแอปพลิเคชันโหนด อย่างไรก็ตาม ผลิตภัณฑ์หลายอย่างไม่พร้อมใช้งานในสภาพแวดล้อมของโหนด ดูรายการ สภาพแวดล้อมที่รองรับ

SDK ผลิตภัณฑ์บางตัวมีเบราว์เซอร์และตัวแปรโหนดแยกกัน ซึ่งแต่ละรายการมีให้ทั้งในรูปแบบ ESM และ CJS และ SDK ผลิตภัณฑ์บางตัวยังมีตัวแปร Cordova หรือ React Native อีกด้วย Web SDK ได้รับการกำหนดค่าเพื่อให้มีตัวแปรที่ถูกต้องตามการกำหนดค่าเครื่องมือหรือสภาพแวดล้อมของคุณ และไม่ควรต้องมีการเลือกด้วยตนเองในกรณีส่วนใหญ่ 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 ออบเจ็กต์การกำหนดค่าของคุณจะมี field 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 จนกว่าทั้งหน้าจะโหลดได้ หากคุณกำลังใช้สคริปต์ API CDN แบบโมดูลาร์กับ <script type="module"> นี่เป็นการทำงานเริ่มต้น หากคุณกำลังใช้สคริปต์ CDN เนมสเปซเป็นโมดูล ให้ทำตามขั้นตอนเหล่านี้เพื่อเลื่อนการโหลด:

  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 จากแอปนั้นได้ 2 วิธี:

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 Hosting สำหรับแอปของคุณแล้ว คุณอาจทำตามขั้นตอนด้านล่างหลายขั้นตอนแล้ว

หากต้องการให้บริการเว็บแอป คุณจะต้องใช้ 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