Check out what’s new from Firebase at Google I/O 2022. Learn more

詳細了解 Web 和 Firebase

在使用 Firebase 開發 Web 應用程序時,您可能會遇到不熟悉的概念,或者需要更多信息才能為您的項目做出正確決策的領域。此頁面旨在回答這些問題或將您指向資源以了解更多信息。

如果您對本頁未涵蓋的主題有疑問,請訪問我們的在線社區之一。我們還會定期使用新主題更新此頁面,因此請回來查看我們是否添加了您想了解的主題。

SDK 版本 8 和 9

Firebase 為 Web 應用提供了兩個 SDK 版本:

  • 版本 8。這是 Firebase 多年來一直維護的 JavaScript 界面,並且對於使用現有 Firebase 應用程序的 Web 開發人員來說是熟悉的。由於 Firebase 將在一個主要發布週期後取消對該版本的支持,因此新應用應改為採用版本 9。
  • 模塊化版本 9 .此 SDK 引入了一種模塊化方法,可通過webpackRollup等現代 JavaScript 構建工具減少 SDK 大小並提高效率。

版本 9 與構建工具很好地集成了,這些工具可以去除您的應用程序中未使用的代碼,這一過程稱為“tree-shaking”。使用此 SDK 構建的應用程序受益於大大減少的尺寸足跡。第 8 版雖然可作為模塊使用,但沒有嚴格的模塊化結構,也沒有提供相同程度的尺寸縮減。

儘管第 9 版 SDK 的大部分遵循與第 8 版相同的模式,但代碼的組織方式不同。一般來說,版本 8 面向命名空間和服務模式,而版本 9 面向離散功能。例如,版本 8 的點鏈(例如 firebaseApp.auth firebaseApp.auth() ) )在版本 9 中被單個getAuth()函數替換,​​該函數接受firebaseApp並返回一個 Authentication 實例。

這意味著使用版本 8 或更早版本創建的 Web 應用程序需要重構才能利用版本 9 的模塊化方法。 Firebase 提供了兼容庫來簡化這種過渡;有關詳細信息,請參閱升級指南

支持什麼?

雖然版本 8 和版本 9 具有不同的代碼樣式,但它們為 Firebase 功能和選項提供了非常相似的支持。正如我們將在本指南中詳細描述的那樣,兩個 SDK 版本都支持 JavaScript 和 Node.js 變體,以及用於添加/安裝 SDK 的幾個選項。

添加 SDK 8.0(命名空間) 9.0(模塊化)
npm
  • 對於 JavaScript
  • 對於 Node.js
  • 對於 JavaScript
  • 對於 Node.js
CDN(內容交付網絡)
  • 對於 JavaScript
  • 對於 JavaScript
託管 URL
  • 對於 JavaScript
  • 對於 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 為大多數 Firebase 產品提供 JavaScript 庫,包括 Remote Config、FCM 等。如何將 Firebase SDK 添加到 Web 應用取決於您在應用中使用的工具(如模塊捆綁器),或者您的應用是否在非瀏覽器環境(如 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 與諸如webpackRollup之類的模塊捆綁器一起使用提供了優化選項來“搖樹”未使用的代碼並應用有針對性的 polyfill,這可以大大減少應用程序的大小占用。實現這些功能可能會給您的配置和構建鏈增加一些複雜性,但各種主流 CLI 工具可以幫助緩解這種情況。這些工具包括AngularReactVueNext等。

總之:

  • 提供有價值的應用程序大小優化
  • 強大的工具可用於管理模塊
  • 需要使用 Node.js 進行 SSR

CDN(內容分發網絡)

添加存儲在 Firebase 的 CDN 上的庫是許多開發人員可能熟悉的一種簡單的 SDK 設置方法。使用 CDN 添加 SDK,您不需要構建工具,而且與模塊捆綁器相比,您的構建鏈可能更簡單、更易於使用。如果您不是特別關心應用的安裝大小並且沒有特殊要求(例如從 TypeScript 進行轉譯),那麼 CDN 可能是一個不錯的選擇。

總之:

  • 熟悉又簡單
  • 適用於應用程序大小不是主要問題的情況
  • 當您的網站不使用構建工具時適用。

Firebase 網絡 SDK 變體

目前,Firebase 提供兩種 Web SDK 變體:

  • 一個 JavaScript 包,支持在瀏覽器中使用的所有 Firebase 功能。
  • 一個客戶端 Node.js 包,支持許多(但不是全部)Firebase 功能。請參閱支持的環境列表。

這兩種 SDK 變體都旨在幫助構建 Web 應用程序或客戶端應用程序以供最終用戶訪問,例如在 Node.js 桌面或 IoT 應用程序中。如果您的目標是從特權環境(例如服務器)設置管理訪問權限,請改用Firebase Admin SDK

使用捆綁器和框架進行環境檢測

當您使用 npm 安裝 Firebase Web SDK 時,會同時安裝 JavaScript 和 Node.js 版本。該軟件包提供了詳細的環境檢測,以便為您的應用程序啟用正確的捆綁包。

如果您的代碼使用 Node.js 的require語句,SDK 會找到特定於 Node 的包。否則,必須正確設置捆綁器的設置,以檢測package.json文件中的正確入口點字段(例如mainbrowsermodule )。如果您在使用 SDK 時遇到運行時錯誤,請檢查以確保您的捆綁器已配置為優先考慮適合您環境的正確類型的捆綁包。

了解 Firebase 配置對象

要在您的應用中初始化 Firebase,您需要提供應用的 Firebase 項目配置。您可以隨時獲取 Firebase 配置對象

  • 我們不建議手動編輯您的配置對象,尤其是以下必需的“Firebase 選項”: apiKeyprojectIdappID 。如果您使用這些必需的“Firebase 選項”的無效值或缺失值初始化您的應用,您的應用用戶可能會遇到嚴重問題。

  • 如果您在 Firebase 項目中啟用了 Google Analytics,則您的配置對象包含字段measurementId 。在Analytics 入門頁面中了解有關此字段的更多信息。

  • 如果您在創建 Firebase Web 應用啟用 Google Analytics(分析)或實時數據庫,請確保您在應用中使用的 Firebase 配置對像已使用關聯的配置值(分別為measurementIddatabaseURL )進行更新。您可以隨時獲取 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",
  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,直到整個頁面加載完畢。如果您使用帶有<script type="module">的版本 9 CDN 腳本,這是默認行為。如果您使用版本 8 CDN 腳本作為模塊,請完成以下步驟以延遲加載:

  1. 為 Firebase SDK 的每個script標記添加一個defer標誌,然後使用第二個腳本延遲 Firebase 的初始化,例如:

    <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();

運行本地 Web 服務器進行開發

如果您正在構建網絡應用程序,Firebase JavaScript SDK 的某些部分要求您從服務器而不是本地文件系統提供網絡應用程序。您可以使用Firebase CLI運行本地服務器。

如果您已經為您的應用設置了 Firebase 託管,您可能已經完成了以下幾個步驟。

要為您的網絡應用程序提供服務,您將使用命令行工具 Firebase CLI。

  1. 訪問 Firebase CLI 文檔,了解如何安裝 CLI更新到最新版本

  2. 初始化您的 Firebase 項目。從本地應用程序目錄的根目錄運行以下命令:

    firebase init

  3. 啟動本地服務器進行開發。從本地應用程序目錄的根目錄運行以下命令:

    firebase serve

Firebase JavaScript SDK 的開源資源

Firebase 支持開源開發,我們鼓勵社區貢獻和反饋。

Firebase JavaScript SDK

大多數 Firebase JavaScript SDK 都是在我們的公共Firebase GitHub 存儲庫中作為開源庫開發的。

快速入門示例

Firebase 為 Web 上的大多數 Firebase API 維護了一組快速入門示例。在我們的公共Firebase GitHub 快速入門存儲庫中找到這些快速入門。您可以將這些快速入門用作使用 Firebase SDK 的示例代碼。