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

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

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

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

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

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

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

แม้ว่า API แบบโมดูลส่วนใหญ่จะเป็นไปตามรูปแบบเดียวกับ API ที่มีเนมสเปซ แต่การจัดระเบียบโค้ดจะแตกต่างกัน โดยทั่วไปแล้ว API ที่มีเนมสเปซจะมุ่งเน้นไปที่เนมสเปซและรูปแบบบริการ ส่วน API แบบโมดูลจะมุ่งเน้นไปที่ฟังก์ชันแบบแยกต่างหาก ตัวอย่างเช่น การใช้เครื่องหมายจุดต่อท้ายของ API ที่มีเนมสเปซ เช่น firebaseApp.auth() จะถูกแทนที่ด้วยฟังก์ชัน getAuth() เดียวใน API แบบโมดูล ซึ่งรับ 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

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

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

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

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

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

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

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

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

ตัวแปร Firebase Web SDK

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

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

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

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

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

ดูข้อมูลเกี่ยวกับออบเจ็กต์การกําหนดค่า 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. เพิ่ม Flag 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

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

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);
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 ส่วนใหญ่บนเว็บ ดูการเริ่มต้นใช้งานอย่างรวดเร็วเหล่านี้ได้ในที่เก็บ GitHub ของการเริ่มต้นใช้งาน Firebase อย่างรวดเร็วแบบสาธารณะ คุณสามารถใช้การเริ่มต้นใช้งานเหล่านี้เป็นโค้ดตัวอย่างสําหรับการใช้ Firebase SDK