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

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

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

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

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

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

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

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

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

JavaScript - API แบบแยกส่วนสำหรับแอปใหม่

หากคุณเพิ่งเริ่มใช้การผสานรวมใหม่กับ Firebase คุณสามารถเลือกใช้ Modular 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 ลงใน เว็บแอปขึ้นอยู่กับว่าคุณใช้เครื่องมือใดกับแอป (เช่น โมดูล Bundler)

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

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

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

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

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

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

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

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

ตัวแปร Firebase Web SDK

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

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

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

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

หากโค้ดของคุณใช้คำสั่ง 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 ตรวจสอบว่าออบเจ็กต์การกำหนดค่า Firebase ที่คุณใช้ใน แอปของคุณได้รับการอัปเดตด้วยการกําหนดค่าที่เชื่อมโยง (measurementId และ databaseURL ตามลำดับ) คุณสามารถรับการกำหนดค่า Firebase object ที่ ตลอดเวลา

นี่คือรูปแบบของออบเจ็กต์การกำหนดค่าที่เปิดใช้บริการทั้งหมด (ค่าเหล่านี้ ระบบจะป้อนข้อมูลให้โดยอัตโนมัติ) ดังนี้

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

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