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

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

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

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

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

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

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

แม้ว่า SDK เวอร์ชัน 9 ส่วนใหญ่จะใช้รูปแบบเดียวกันกับเวอร์ชัน 8 แต่การจัดระเบียบโค้ดนั้นแตกต่างกัน โดยทั่วไป เวอร์ชัน 8 มุ่งเน้นไปที่เนมสเปซและรูปแบบบริการ ในขณะที่เวอร์ชัน 9 มุ่งเน้นไปที่ฟังก์ชันที่ไม่ต่อเนื่อง ตัวอย่างเช่นรุ่น 8 dot-ผูกมัดเช่น 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

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

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

หากคุณกำลังเริ่มต้นในการบูรณาการใหม่ที่มี Firebase คุณสามารถเลือกเข้ามาในรุ่นที่ 9 SDK เมื่อคุณ เพิ่มและเริ่มต้นใช้ 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 เพื่อ App JavaScript ของคุณ ส่วนที่เหลือของส่วนนี้มีข้อมูลที่จะช่วยคุณเลือกจากตัวเลือกที่มี

npm

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

ใช้ NPM กับโมดูล Bundler เช่น webpack หรือ Rollup มีตัวเลือกในการเพิ่มประสิทธิภาพให้กับ "ต้นไม้สั่น" รหัสไม่ได้ใช้และใช้ polyfills กำหนดเป้าหมายซึ่งสามารถลดการปล่อยก๊าซขนาดของแอปของคุณ การนำคุณลักษณะเหล่านี้ไปใช้อาจเพิ่มความซับซ้อนให้กับการกำหนดค่าและห่วงโซ่การสร้างของคุณ แต่เครื่องมือ CLI หลักต่างๆ สามารถช่วยบรรเทาปัญหาดังกล่าวได้ เครื่องมือเหล่านี้รวม เชิงมุม , ตอบสนอง , Vue , ถัดไป , และอื่น ๆ

สรุป:

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

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

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

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

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

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

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

  • หากคุณเปิดใช้งาน Google Analytics ในโครงการ Firebase ของวัตถุการตั้งค่าของคุณมีสนาม measurementId เรียนรู้เพิ่มเติมเกี่ยวกับข้อมูลนี้ใน Analytics การเริ่มต้นหน้า

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

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

ห้องสมุดที่มีอยู่

ตัวเลือกการตั้งค่าเพิ่มเติม

ความล่าช้าในการโหลด Firebase SDK (จาก CDN)

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

  1. เพิ่ม defer ธงแต่ละ script แท็กสำหรับ Firebase SDKs แล้วเลื่อนการเริ่มต้นของ Firebase โดยใช้สคริปต์ที่สองตัวอย่างเช่น:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/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 จากแอปนั้นได้สองวิธีที่เทียบเท่ากัน:

เว็บรุ่น 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();

เว็บรุ่น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 ของตัวเอง

เว็บรุ่น 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);

เว็บรุ่น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 SDK ของ JavaScript ได้รับการพัฒนาเป็นห้องสมุดมาเปิดในที่สาธารณะของเรา ที่เก็บ Firebase GitHub

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

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