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

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

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

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

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

  • JavaScript - Namespaced นี่คืออินเทอร์เฟซ JavaScript ที่ Firebase ดูแลมาเป็นเวลาหลายปี และเป็นที่คุ้นเคยสำหรับนักพัฒนาเว็บที่มีแอป Firebase รุ่นเก่า เนื่องจาก API ที่มี Namespace ไม่ได้รับประโยชน์จากการรองรับฟีเจอร์ใหม่ๆ อย่างต่อเนื่อง แอปใหม่ส่วนใหญ่จึงควรใช้ 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 ที่มี Namespace จะต้อง ทำการปรับโครงสร้างใหม่เพื่อใช้ประโยชน์จากการออกแบบแอปแบบแยกส่วน ดูรายละเอียดเพิ่มเติมได้ที่คำแนะนำในการอัปเกรด

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 เป็นตัวเลือกสำหรับแพ็กเกจบางรายการ แพ็กเกจ 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 CDN อาจเป็นตัวเลือกที่ดี

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

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

ตัวแปร Firebase Web SDK

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

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

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

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

หากโค้ดใช้คำสั่ง Node.js require SDK จะค้นหาชุดรวมที่เฉพาะเจาะจงของ Node ไม่เช่นนั้น คุณต้องตั้งค่า 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 ได้ทุกเมื่อ

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

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 ได้