了解有關 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 的範例程式碼。