ทำความเข้าใจ Firebase สำหรับเว็บ

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

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

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

Firebase มีแพลตฟอร์ม API 2 แบบสำหรับเว็บแอป ดังนี้

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

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

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

ซึ่งหมายความว่าเว็บแอปที่สร้างด้วย Namespaced 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 แบบแยกส่วน

วิธีเพิ่ม SDK ของเว็บลงในแอป

Firebase มีไลบรารี JavaScript สำหรับผลิตภัณฑ์ Firebase ส่วนใหญ่ รวมถึงการกำหนดค่าระยะไกล, FCM และอื่นๆ วิธีเพิ่ม Firebase SDK ลงในเว็บแอปขึ้นอยู่กับว่าคุณใช้เครื่องมือใดกับแอป (เช่น Bundler ของโมดูล)

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

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

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

npm

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

การใช้ npm กับ Module Bundler เช่น Webpack หรือ Rollup จะมีตัวเลือกการเพิ่มประสิทธิภาพสำหรับโค้ดที่ไม่ได้ใช้ "Tree-เชค" และการใช้ Polyfill ที่กำหนดเป้าหมาย ซึ่งจะลดขนาดของแอปได้อย่างมาก การใช้ฟีเจอร์เหล่านี้อาจเพิ่มความซับซ้อนบางอย่างในการกำหนดค่าและสร้างห่วงโซ่ แต่เครื่องมือ 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 แทน

การตรวจจับสภาพแวดล้อมด้วย Bundler และเฟรมเวิร์ก

เมื่อติดตั้ง Firebase Web SDK โดยใช้ npm ระบบจะติดตั้งทั้งเวอร์ชัน JavaScript และ Node.js แพ็กเกจนี้มีการตรวจจับสภาพแวดล้อมโดยละเอียด เพื่อให้เปิดใช้ Bundle ที่เหมาะกับแอปพลิเคชันได้

หากโค้ดใช้คำสั่ง require ของ Node.js แล้ว SDK จะค้นหาแพ็กเกจเฉพาะโหนด ไม่เช่นนั้น คุณต้องกำหนดค่าการตั้งค่า Bundler ให้ถูกต้องเพื่อตรวจจับช่องจุดแรกเข้าที่ถูกต้องในไฟล์ package.json (เช่น main, browser หรือ module) หากคุณพบข้อผิดพลาดเกี่ยวกับรันไทม์กับ SDK โปรดตรวจสอบว่าได้กำหนดค่า Bundler ให้จัดลำดับความสำคัญของ Bundle ที่ถูกต้องสำหรับสภาพแวดล้อมของคุณ

ดูข้อมูลเกี่ยวกับออบเจ็กต์การกำหนดค่า Firebase

หากต้องการเริ่มต้น Firebase ในแอป คุณต้องกำหนดค่าโปรเจ็กต์ Firebase ของแอป คุณรับออบเจ็กต์การกำหนดค่า Firebase ได้ทุกเมื่อ

  • เราไม่แนะนำให้แก้ไขออบเจ็กต์การกำหนดค่าด้วยตนเอง โดยเฉพาะ "ตัวเลือก Firebase" ที่จำเป็นต่อไปนี้ apiKey, projectId และ appID หากคุณเริ่มต้นแอปด้วยค่าที่ไม่ถูกต้องหรือขาดหายไปสำหรับ "ตัวเลือก Firebase" ที่จำเป็นเหล่านี้ ผู้ใช้แอปอาจพบปัญหาร้ายแรง ยกเว้น authDomain ซึ่งอัปเดตได้โดยทำตามแนวทางปฏิบัติแนะนำสำหรับการใช้ signInWithRedirect

  • หากคุณเปิดใช้ Google Analytics ในโปรเจ็กต์ Firebase ออบเจ็กต์การกำหนดค่าจะมีช่อง measurementId ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องนี้ในหน้าเริ่มต้นใช้งาน Analytics

  • หากคุณเปิดใช้ Google Analytics หรือ Realtime Database หลังจากที่สร้างเว็บแอป Firebase ให้ตรวจสอบว่าออบเจ็กต์การกำหนดค่าของ 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 ของ API แบบโมดูลกับ <script type="module"> นี่คือลักษณะการทำงานเริ่มต้น หากคุณใช้สคริปต์ CDN ที่ใช้เนมสเปซเป็นโมดูล ให้ทำตามขั้นตอนเหล่านี้เพื่อเลื่อนการโหลด

  1. เพิ่มแฟล็ก defer ลงในแท็ก script แต่ละรายการสำหรับ Firebase SDK จากนั้นเลื่อนการเริ่มต้น Firebase โดยใช้สคริปต์ที่ 2 เช่น

    <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

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

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 ได้