Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

เรียนรู้เพิ่มเติมเกี่ยวกับเว็บและ Firebase

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

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

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

SDK เวอร์ชัน 8 และ 9

Firebase มี SDK สองเวอร์ชันสำหรับเว็บแอป:

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

เวอร์ชัน 9 ทำงานได้ดีกับเครื่องมือสร้างที่ตัดโค้ดที่ไม่ได้ใช้ในแอปของคุณออก ซึ่งเป็นกระบวนการที่เรียกว่า "tree-shaking" แอปที่สร้างด้วย SDK นี้จะได้รับประโยชน์จากขนาดรอยเท้าที่ลดลงอย่างมาก เวอร์ชัน 8 แม้ว่าจะมีให้ใช้งานเป็นโมดูล แต่ไม่มีโครงสร้างโมดูลาร์ที่เคร่งครัด และไม่มีการลดขนาดในระดับเดียวกัน

แม้ว่า SDK เวอร์ชัน 9 ส่วนใหญ่จะใช้รูปแบบเดียวกันกับเวอร์ชัน 8 แต่การจัดระเบียบโค้ดนั้นแตกต่างกัน โดยทั่วไป เวอร์ชัน 8 มุ่งเน้นไปที่เนมสเปซและรูปแบบบริการ ในขณะที่เวอร์ชัน 9 มุ่งเน้นไปที่ฟังก์ชันที่ไม่ต่อเนื่อง ตัวอย่างเช่น dot-chaning ของเวอร์ชัน 8 เช่น firebaseApp.auth() ถูกแทนที่ในเวอร์ชัน 9 ด้วย getAuth() เดียวที่ใช้ firebaseApp และส่งคืนอินสแตนซ์การตรวจสอบสิทธิ์

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

รองรับอะไรบ้าง?

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

เพิ่ม SDK ด้วย 8.0 (เนมสเปซ) 9.0 (โมดูลาร์)
npm
  • สำหรับจาวาสคริปต์
  • สำหรับ Node.js
  • สำหรับจาวาสคริปต์
  • สำหรับ Node.js
CDN (เครือข่ายการส่งเนื้อหา)
  • สำหรับจาวาสคริปต์
  • สำหรับจาวาสคริปต์
URL โฮสติ้ง
  • สำหรับจาวาสคริปต์
  • สำหรับ Node.js

สำหรับข้อมูลเพิ่มเติม โปรดดู วิธีเพิ่ม Web SDK ในแอปของคุณ และ Firebase Web SDK เวอร์ชันต่างๆ ในหน้านี้

เวอร์ชัน 9 สำหรับแอปใหม่

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

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

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

สำหรับตัวอย่างและรายละเอียดเพิ่มเติม โปรดดูคำแนะนำสำหรับแต่ละผลิตภัณฑ์รวม ถึงเอกสารอ้างอิงเวอร์ชัน 9

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

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

คุณสามารถเพิ่ม ไลบรารีใดๆ ที่มี ลงในแอพของคุณได้ด้วยวิธีใดวิธีหนึ่งที่รองรับ:

  • npm (สำหรับโมดูลบันเดิลและ Node.js)
  • 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 หรือ Rollup มีตัวเลือกการปรับให้เหมาะสมเพื่อ "เขย่าต้นไม้" โค้ดที่ไม่ได้ใช้ และใช้โพลีฟิลเป้าหมาย ซึ่งสามารถลดขนาดฟุตพริ้นต์ของแอปได้อย่างมาก การนำคุณลักษณะเหล่านี้ไปใช้อาจเพิ่มความซับซ้อนให้กับการกำหนดค่าและห่วงโซ่การสร้างของคุณ แต่เครื่องมือ CLI หลักต่างๆ สามารถช่วยบรรเทาปัญหาดังกล่าวได้ เครื่องมือเหล่านี้รวมถึง Angular , React , Vue , Next และอื่นๆ

สรุป:

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

CDN (เครือข่ายการจัดส่งเนื้อหา)

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

สรุป:

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

Firebase Web SDK รุ่นต่างๆ

ปัจจุบัน Firebase มี Web SDK ให้เลือก 2 เวอร์ชัน:

  • ชุด JavaScript ที่รองรับคุณสมบัติ Firebase ทั้งหมดสำหรับใช้ในเบราว์เซอร์
  • ชุด Node.js ฝั่งไคลเอ็นต์ที่รองรับฟีเจอร์ Firebase จำนวนมากแต่ไม่ทั้งหมด ดูรายการ สภาพแวดล้อมที่รองรับ

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

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

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

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

เรียนรู้เกี่ยวกับอ็อบเจ็กต์การกำหนดค่า Firebase

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

  • เราไม่แนะนำให้แก้ไขออบเจ็กต์การกำหนดค่าของคุณด้วยตนเอง โดยเฉพาะ "ตัวเลือก Firebase" ที่จำเป็นต่อไปนี้: apiKey , projectId และ appID หากคุณเริ่มต้นแอปด้วยค่าที่ไม่ถูกต้องหรือขาดหายไปสำหรับ "ตัวเลือก Firebase" ที่จำเป็นเหล่านี้ ผู้ใช้แอปของคุณอาจประสบปัญหาร้ายแรง

  • หากคุณเปิดใช้งาน Google Analytics ในโปรเจ็กต์ Firebase ออบเจ็กต์ config ของคุณจะมี field measurementId เรียนรู้เพิ่มเติมเกี่ยวกับฟิลด์นี้ใน หน้าเริ่มต้นใช้งาน Analytics

  • หากคุณเปิดใช้งาน Google Analytics หรือฐานข้อมูลเรียลไทม์ หลังจาก สร้าง Firebase Web App ตรวจสอบให้แน่ใจว่าอ็อบเจ็กต์การกำหนดค่า Firebase ที่คุณใช้ในแอปของคุณได้รับการอัปเดตด้วยค่าการกำหนดค่าที่เกี่ยวข้อง ( measurementId และ databaseURL ตามลำดับ) คุณสามารถ รับวัตถุการกำหนดค่า Firebase ได้ตลอดเวลา

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

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 เวอร์ชัน 9 กับ <script type="module"> นี่เป็นพฤติกรรมเริ่มต้น หากคุณกำลังใช้สคริปต์ CDN เวอร์ชัน 8 เป็นโมดูล ให้ทำตามขั้นตอนเหล่านี้เพื่อเลื่อนการโหลด:

  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 project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

ใช้โปรเจ็กต์ Firebase หลายโปรเจ็กต์ในแอปเดียว

ในกรณีส่วนใหญ่ คุณจะต้องเริ่มต้น Firebase ในแอปเริ่มต้นเพียงแอปเดียว คุณสามารถเข้าถึง Firebase จากแอปนั้นได้สองวิธีที่เทียบเท่ากัน:

Web version 9

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 version 8

// 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 version 9

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 version 8

// 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 SDKs

Firebase JavaScript SDK ส่วนใหญ่ได้รับการพัฒนาเป็นไลบรารีโอเพนซอร์สในที่ เก็บ Firebase GitHub สาธารณะของเรา

ตัวอย่างการเริ่มต้นอย่างรวดเร็ว

Firebase เก็บรักษาคอลเลกชันของตัวอย่างการเริ่มต้นอย่างรวดเร็วสำหรับ Firebase API ส่วนใหญ่บนเว็บ ค้นหาการเริ่มต้นอย่างรวดเร็วเหล่านี้ในที่ เก็บ Firebase GitHub Quickstart สาธารณะของเรา คุณสามารถใช้การเริ่มต้นอย่างรวดเร็วเหล่านี้เป็นโค้ดตัวอย่างสำหรับการใช้ Firebase SDK