詳細了解 Web 和 Firebase

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

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

SDK 版本：命名空間和模塊化

Firebase 為 Web 應用程序提供了兩個 API 界面：

  • JavaScript - 命名空間。這是 Firebase 維護了多年的 JavaScript 接口，對於使用舊版 Firebase 應用程序的 Web 開發人員來說很熟悉。由於命名空間 API 無法從持續的新功能支持中獲益，因此大多數新應用程序應該改為採用模塊化 API。
  • JavaScript-模塊化。該 SDK 基於模塊化方法，通過webpack或Rollup等現代 JavaScript 構建工具提供更小的 SDK 大小和更高的效率。

模塊化 API 與構建工具很好地集成，可以去除應用程序中未使用的代碼，這一過程稱為“搖樹”。使用此 SDK 構建的應用程序受益於大大減少的佔用空間。命名空間 API 雖然可以作為模塊使用，但沒有嚴格的模塊化結構，也沒有提供相同程度的大小縮減。

儘管大多數模塊化 API 遵循與命名空間 API 相同的模式，但代碼的組織方式不同。通常，命名空間 API 面向命名空間和服務模式，而模塊化 API 面向離散功能。例如，命名空間 API 的點鏈（例如firebaseApp.auth()在模塊化 API 中被單個getAuth()函數替換，​​該函數接受firebaseApp並返回一個 Authentication 實例。

這意味著使用命名空間 API 創建的 Web 應用程序需要重構才能利用模塊化應用程序設計。有關詳細信息，請參閱升級指南。

支持什麼？

雖然命名空間 API 和模塊化 API 具有不同的代碼風格，但它們為 Firebase 功能和選項提供了非常相似的支持。正如我們將在本指南中詳細描述的那樣，這兩個 SDK 版本都支持 JavaScript 和 Node.js 變體以及用於添加/安裝 SDK 的多個選項。

添加 SDKs命名空間模塊化的
npm
  • 對於 JavaScript
  • 對於 Node.js
  • 對於 JavaScript
  • 對於 Node.js
CDN（內容分發網絡）
  • 對於 JavaScript
  • 對於 JavaScript
託管網址
  • 對於 JavaScript
  • 對於 Node.js

有關更多信息，請參閱本頁後面的將 Web SDK 添加到您的應用程序和Firebase Web SDK 變體的方法。

JavaScript - 新應用程序的模塊化 API

如果您開始與 Firebase 進行新的集成，則可以在添加和初始化 SDK時選擇使用模塊化 API。

在開發應用程序時，請記住您的代碼將主要圍繞功能進行組織。在模塊化 API 中，服務作為第一個參數傳遞，然後函數使用服務的詳細信息來完成其餘的工作。例如：

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

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

有關更多示例和詳細信息，請參閱每個產品領域的指南以及模塊化 API 參考文檔。

將 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 與模塊捆綁器（例如webpack或Rollup）一起使用可以提供優化選項以“搖樹”未使用的代碼並應用有針對性的 polyfill，這可以大大減少應用程序的佔用空間。實現這些功能可能會給您的配置和構建鏈增加一些複雜性，但各種主流 CLI 工具可以幫助減輕這種情況。這些工具包括Angular 、 React 、 Vue 、 Next等。

總之：

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

CDN（內容分發網絡）

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

總之：

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

Firebase Web SDK 變體

目前，Firebase 提供兩種 Web SDK 變體：

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

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

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

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

如果您的代碼使用 Node.js require語句，SDK 會找到特定於 Node 的包。否則，您的捆綁器的設置必須正確計算以檢測package.json文件中的正確入口點字段（例如， main 、 browser或module ）。如果您在使用 SDK 時遇到運行時錯誤，請檢查以確保您的捆綁器配置為針對您的環境優先處理正確的捆綁包類型。

了解 Firebase 配置對象

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

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

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

  • 如果您在創建 Firebase Web 應用程序後啟用 Google Analytics 或實時數據庫，請確保您在應用程序中使用的 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",
  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，直到加載整個頁面。如果您將第 9 版 CDN 腳本與<script type="module">一起使用，這是默認行為。如果您使用版本 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 modular API

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 namespaced API

// 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 項目中。或者您可能希望對一個項目進行身份驗證，同時保持第二個項目未經身份驗證。

Firebase JavaScript SDK 允許您同時在單個應用程序中初始化和使用多個 Firebase 項目，每個項目使用自己的 Firebase 配置信息。

Web modular API

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 namespaced API

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

運行本地 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 的示例代碼。