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

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

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

เวอร์ชัน SDK: Namespaced และ Modular

Firebase มี API 2 รูปแบบสำหรับเว็บแอป ดังนี้

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

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

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

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

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

  • npm (สำหรับตัวรวมโมดูล)
  • 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 ร่วมกับ module bundler เช่น webpack หรือ Rollup มอบตัวเลือกการปรับแต่งประสิทธิภาพสำหรับ "tree-shake" โค้ดที่ไม่ได้ใช้ และใช้ polyfill ที่กำหนด ซึ่งสามารถลดขนาดแอปพลิเคชันของคุณได้อย่างมาก การนำฟีเจอร์เหล่านี้ไปใช้อาจเพิ่มความซับซ้อนให้กับการกำหนดค่าและ build chain ของคุณ แต่เครื่องมือ CLI หลักๆ ต่างๆ สามารถช่วยลดความซับซ้อนดังกล่าวได้ เครื่องมือเหล่านี้รวมถึง Angular React Vue Next และอื่นๆ

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

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

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

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

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

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

ตัวแปรของ Firebase web SDK

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

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

  • หากคุณเปิดใช้งาน Google Analytics หรือ Realtime Database หลังจากที่คุณสร้าง 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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 ที่มี Namespace เป็นโมดูล ให้ทำตามขั้นตอนต่อไปนี้เพื่อเลื่อนการโหลด

  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 configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

ใช้โปรเจ็กต์ Firebase หลายโปรเจ็กต์ในแอปเดียว

ในกรณีส่วนใหญ่ คุณเพียงแค่ต้องเริ่มต้น Firebase ในแอปเริ่มต้นแอปเดียว คุณเข้าถึง Firebase จากแอปนั้นได้ 2 วิธีที่เทียบเท่ากัน

Web

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

// 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

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

// 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 ส่วนใหญ่ได้รับการพัฒนาเป็นไลบรารีโอเพนซอร์สในที่เก็บ GitHub ของ Firebase สาธารณะ

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

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