Check out what’s new from Firebase@ Google I/O 2021, and join our alpha program for early access to the new Remote Config personalization feature. Learn more

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

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

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

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

Firebase มี SDK เวอร์ชัน 2 เวอร์ชันสำหรับเว็บแอป โดยเวอร์ชันหนึ่งอยู่ในเวอร์ชันเบต้า:

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

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

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

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

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

หากคุณกำลังเริ่มต้นการผสานรวมกับ Firebase ใหม่ คุณสามารถเลือกใช้ SDK เวอร์ชัน 9 Beta ได้เมื่อคุณ เพิ่มและเริ่มต้น 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 ลงในเว็บแอปขึ้นอยู่กับว่าคุณเลือกใช้โฮสติ้งของ Firebase สำหรับแอปหรือไม่ ใช้เครื่องมือใดกับแอป (เช่น ชุดรวมโมดูล) หรือแอปทำงานในเบราว์เซอร์ที่ไม่ใช่เบราว์เซอร์ สภาพแวดล้อมเช่น Node.js

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

  • npm (สำหรับโมดูลบันเดิลและ Node.js)
  • CDN (เครือข่ายการจัดส่งเนื้อหา)
  • URL โฮสติ้งของ Firebase

สำหรับคำแนะนำการตั้งค่าโดยละเอียดสำหรับแต่ละวิธี โปรดดูที่ เพิ่ม 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 อาจเป็นทางเลือกที่ดี

สรุป:

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

URL โฮสติ้ง

Firebase Hosting มี URL ที่สงวนไว้ซึ่งช่วยให้คุณปรับปรุงประสิทธิภาพโดยการโหลดไฟล์จากต้นทางเดียวกัน หากคุณใช้หรือวางแผนที่จะใช้ Firebase Hosting ในแอปอยู่แล้ว คุณสามารถเพิ่ม JavaScript SDK ผ่าน Hosting URL และได้รับประโยชน์จากประสิทธิภาพที่เพิ่มขึ้นนี้ นอกจากนี้ วิธีนี้ยังสนับสนุนการเริ่มต้นอัตโนมัติของ SDK ซึ่งช่วยลดความยุ่งยากในการจัดการสภาพแวดล้อมต่างๆ เช่น dev, staging และ production เรียนรู้เพิ่มเติมเกี่ยวกับ การเพิ่ม SDK ผ่าน Hosting URLs ที่สงวนไว้

สรุป:

  • ให้ข้อได้เปรียบด้านประสิทธิภาพเล็กน้อยเหนือ CDN
  • สามารถลดความซับซ้อนในการทำงานในสภาพแวดล้อมการพัฒนาที่หลากหลาย
  • สะดวกสำหรับแอพที่ใช้ Firebase Hosting อยู่แล้ว

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 โปรดตรวจสอบให้แน่ใจว่าบันเดิลของคุณได้รับการกำหนดค่าให้จัดลำดับความสำคัญของบันเดิลที่ถูกต้องสำหรับสภาพแวดล้อมของคุณ

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

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

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

คุณชะลอการรวม Firebase SDK ได้จนกว่าจะโหลดทั้งหน้า

  1. เพิ่มแฟ defer ให้กับแท็ก script แต่ละรายการสำหรับ Firebase SDK จากนั้นจึงเลื่อนการเริ่มต้น Firebase โดยใช้สคริปต์ที่ 2 เช่น

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

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var 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 ของตัวเอง

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var 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