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

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

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

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

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

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

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

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

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

JavaScript - Modular API สำหรับแอปใหม่

หากเพิ่งเริ่มต้นการผสานรวมใหม่กับ Firebase คุณสามารถเลือกใช้ Modular API ได้เมื่อเพิ่มและเริ่มต้น SDK

ขณะพัฒนาแอป โปรดทราบว่าโค้ดจะได้รับการจัดระเบียบโดยมีฟังก์ชันเป็นหลัก ใน Modular 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 เป็นตัวเลือกสำหรับแพ็กเกจบางรายการ แพ็กเกจ Node.js จำเป็นสำหรับขั้นตอนการแสดงผลฝั่งเซิร์ฟเวอร์ (SSR) ของเฟรมเวิร์ก SSR

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

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

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

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

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

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

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

ตัวแปร Firebase Web SDK

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

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

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

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

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

ดูข้อมูลเกี่ยวกับออบเจ็กต์การกำหนดค่า 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",
  // 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 ของ Modular 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();

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();

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

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);

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();

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

หากคุณกำลังสร้างเว็บแอป บางส่วนของ 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 ได้