詳細了解 Web 和 Firebase

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

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

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

Firebase 為 Web 應用程序提供了兩個 API 接口：

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

模塊化 API 與構建工具完美集成，可以刪除應用程序中未使用的代碼，這一過程稱為“tree-shaking”。使用此 SDK 構建的應用程序可大大減少佔用空間。命名空間 API 雖然可以作為模塊使用，但不具有嚴格的模塊化結構，並且不提供相同程度的大小縮減。

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

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

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 庫，包括遠程配置、FCM 等。如何將 Firebase SDK 添加到您的 Web 應用取決於您在應用中使用的工具（例如模塊捆綁程序）。

您可以通過支持的方法之一將任何可用的庫添加到您的應用程序中：

  • npm（用於模塊捆綁器）
  • CDN（內容分發網絡）

有關詳細的設置說明，請參閱將 Firebase 添加到您的 JavaScript 應用程序。本節的其餘部分包含可幫助您從可用選項中進行選擇的信息。

新項目管理

下載 Firebase npm 包（包括瀏覽器和 Node.js 捆綁包）可為您提供 Firebase SDK 的本地副本，非瀏覽器應用程序（例如 Node.js 應用程序、React Native 或 Electron）可能需要該副本。下載內容包括 Node.js 和 React Native 捆綁包，作為某些軟件包的選項。 Node.js 包對於 SSR 框架的服務器端渲染 (SSR) 步驟是必需的。

將 npm 與webpack或Rollup等模塊捆綁器結合使用，可以提供優化選項來“tree-shake”未使用的代碼並應用有針對性的 polyfill，這可以大大減少應用程序的大小占用。實現這些功能可能會增加配置和構建鏈的一些複雜性，但各種主流 CLI 工具可以幫助緩解這種情況。這些工具包括Angular 、 React 、 Vue 、 Next等。

總之：

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

CDN（內容分發網絡）

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

總之：

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

Firebase Web SDK 變體

Firebase 的 Web SDK 可以在瀏覽器和 Node 應用程序中使用。但是，有一些產品在 Node 環境中不可用。請參閱支持的環境列表。

一些產品 SDK 提供單獨的瀏覽器和 Node 變體，每種變體都以 ESM 和 CJS 格式提供，一些產品 SDK 甚至提供 Cordova 或 React Native 變體。 Web SDK 配置為根據您的工具配置或環境提供正確的變體，並且在大多數情況下不需要手動選擇。所有 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，直到整個頁面加載完畢。如果您使用帶有<script type="module">的模塊化 API CDN 腳本，這是默認行為。如果您使用命名空間 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 服務器進行開發

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

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

要為您的 Web 應用提供服務，您將使用 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 的示例代碼。