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

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

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

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

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

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

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

แม้ว่า API แบบแยกส่วนส่วนใหญ่จะมีรูปแบบเดียวกับ Namespaced API แต่การจัดระเบียบโค้ดจะแตกต่างกัน โดยทั่วไปเนมสเปซ API จะมุ่งไปที่เนมสเปซและรูปแบบบริการ ขณะที่ API แบบแยกส่วนจะมุ่งไปที่ฟังก์ชันที่แยกกันต่างหาก ตัวอย่างเช่น ระบบจะแทนที่การผูกจุดของ Namespaced 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 แบบแยกส่วน

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

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

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

  • 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 กับ Bundler ของโมดูล เช่น Webpack หรือ Rollup จะทำให้มีตัวเลือกในการเพิ่มประสิทธิภาพสำหรับโค้ดที่ไม่มีการใช้งาน "Tree Shape" และสามารถใช้ Polyfill ที่กำหนดเป้าหมาย ซึ่งจะลดขนาดการใช้งานของแอปลงอย่างมาก การใช้ฟีเจอร์เหล่านี้อาจเพิ่มความซับซ้อนให้กับการกำหนดค่าและสร้างเชน แต่เครื่องมือ CLI หลักหลายอย่างสามารถช่วยแก้ปัญหานี้ได้ เครื่องมือเหล่านี้ ได้แก่ Angular, React, Vue, Next และอื่นๆ

บทสรุปมีดังนี้:

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

CDN (เครือข่ายนำส่งเนื้อหา)

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

บทสรุปมีดังนี้:

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

ตัวแปร Firebase Web SDK

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

SDK ของผลิตภัณฑ์บางรายการมีเบราว์เซอร์และตัวแปรโหนดแยกต่างหาก ซึ่งแต่ละ SDK มีให้ใช้งานทั้งในรูปแบบ ESM และ CJS และ SDK ผลิตภัณฑ์บางรายการก็มีตัวแปรของ Cordova หรือ React Native ด้วย Web SDK ได้รับการกำหนดค่าให้ระบุตัวแปรที่ถูกต้องตามการกำหนดค่าเครื่องมือหรือสภาพแวดล้อม และไม่ควรต้องเลือกด้วยตนเองในกรณีส่วนใหญ่ SDK ทุกตัวแปรออกแบบมาเพื่อช่วยสร้างเว็บแอปหรือแอปไคลเอ็นต์สำหรับการเข้าถึงของผู้ใช้ปลายทาง เช่น ในแอปพลิเคชัน Node.js บนเดสก์ท็อปหรือ IoT หากเป้าหมายคือการตั้งค่าสิทธิ์การเข้าถึงระดับผู้ดูแลระบบจากสภาพแวดล้อมที่ได้รับสิทธิ์ (เช่น เซิร์ฟเวอร์) ให้ใช้ Firebase Admin SDK แทน

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

เมื่อติดตั้ง 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" ที่จำเป็นเหล่านี้ ผู้ใช้แอปอาจพบปัญหาร้ายแรง แต่มีข้อยกเว้นคือ authDomain ซึ่งอัปเดตได้โดยทำตามแนวทางปฏิบัติแนะนำสำหรับการใช้ signInWithRedirect

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

  • หากคุณเปิดใช้ Google Analytics หรือฐานข้อมูลเรียลไทม์หลังจากสร้างเว็บแอป 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 อื่น หรือคุณอาจต้องตรวจสอบสิทธิ์โปรเจ็กต์หนึ่งขณะที่เก็บโปรเจ็กต์ที่ 2 ไว้โดยไม่ต้องตรวจสอบสิทธิ์

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