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

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

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

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

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 แต่องค์กรของโค้ดจะแตกต่างกัน โดยทั่วไป Namespaced API จะมุ่งเน้นไปที่เนมสเปซและรูปแบบบริการ ส่วน Modular 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
});

ดูตัวอย่างและรายละเอียดเพิ่มเติมได้ที่คู่มือสำหรับกลุ่มผลิตภัณฑ์แต่ละกลุ่ม รวมถึงเอกสารอ้างอิง Modular API

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

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

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

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

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

npm

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

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

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

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

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

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

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

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

ตัวแปร Firebase Web SDK

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 แพ็กเกจนี้จะให้การตรวจจับสภาพแวดล้อมโดยละเอียดเพื่อเปิดใช้ Bundle ที่เหมาะสมสำหรับแอปพลิเคชันของคุณ

หากโค้ดใช้คำสั่ง 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 ที่มีเนมสเปซเป็นโมดูล ให้ทำตามขั้นตอนต่อไปนี้เพื่อเลื่อนเวลาโหลด

  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 อื่น หรือคุณอาจต้องการตรวจสอบสิทธิ์โปรเจ็กต์หนึ่งโดยไม่ตรวจสอบสิทธิ์โปรเจ็กต์ที่ 2

SDK Firebase JavaScript ช่วยให้คุณเริ่มต้นและใช้โปรเจ็กต์ 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. ไปที่เอกสารประกอบเกี่ยวกับ CLI ของ Firebase เพื่อดูวิธีติดตั้ง 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 ได้