使用 Firebase 開發網頁應用程式時，您可能會遇到不熟悉的概念，或是需要更多資訊才能為專案做出正確決策的領域。本頁面旨在回答這些問題，或提供資源供您進一步瞭解。
如果對本頁面未涵蓋的主題有疑問，請前往我們的線上社群。我們也會定期更新這個頁面，新增主題，因此請隨時返回查看是否有您想瞭解的主題。
SDK 版本：具命名空間和模組化
Firebase 為網頁應用程式提供兩項 API 介面：
- JavaScript - 命名空間。這是 Firebase 維護多年的 JavaScript 介面，如果網頁開發人員使用較舊的 Firebase 應用程式，應該會很熟悉。由於命名空間 API 無法享有持續的新功能支援，因此大多數新應用程式應改用模組化 API。
- JavaScript - 模組化。這個 SDK 採用模組化方法，可縮減 SDK 大小，並搭配 webpack 或 Rollup 等現代 JavaScript 建構工具，提升效率。
模組化 API 可與建構工具完美整合，從應用程式中移除未使用的程式碼，這個程序稱為「樹狀結構修剪」。使用這個 SDK 建構的應用程式可大幅減少大小。雖然命名空間 API 可做為模組使用，但並非嚴格的模組化結構，無法達到相同的縮減大小程度。
雖然大多數模組化 API 遵循與命名空間 API 相同的模式，但程式碼的組織方式不同。一般來說，命名空間 API 適用於命名空間和服務模式，而模組化 API 則適用於個別函式。舉例來說，模組化 API 會以單一 getAuth() 函式取代命名空間 API 的點鏈結 (例如 firebaseApp.auth())，該函式會採用 firebaseApp 並傳回 Authentication 例項。
也就是說，使用命名空間 API 建立的網頁應用程式需要重構，才能採用模組化應用程式設計。詳情請參閱升級指南。
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 新增至網頁應用程式的方式，取決於您在應用程式中使用的工具 (例如模組打包器)。
您可以透過其中一種支援的方法，將可用程式庫新增至應用程式：
- npm (適用於模組打包工具)
- CDN (內容傳遞聯播網)
如需詳細設定操作說明，請參閱「將 Firebase 新增至 JavaScript 應用程式」。本節其餘內容將說明如何從可用選項中進行選擇。
FCMnpm
下載 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 等。
簡單來說：
- 提供實用的應用程式大小最佳化功能
- 您可以使用強大的工具管理模組
- 使用 Node.js 進行伺服器端算繪時的必要條件
CDN (內容傳遞聯播網)
從 Firebase 的 CDN 新增程式庫，是許多開發人員都熟悉的簡單 SDK 設定方法。使用 CDN 新增 SDK 時，您不需要建構工具，而且與模組打包工具相比，建構鏈可能更簡單，也更容易使用。如果您不太在意應用程式的安裝大小，也沒有從 TypeScript 轉譯等特殊需求，CDN 可能是不錯的選擇。
簡單來說：
- 熟悉又簡單
- 應用程式大小不是主要考量時適用
- 如果您的網站未使用建構工具，就適合採用這種做法。
Firebase Web SDK 變體
Firebase 的網頁 SDK 可用於瀏覽器和 Node 應用程式。不過，Node 環境不支援多項產品。請參閱支援的環境清單。
部分產品 SDK 提供個別的瀏覽器和 Node 變體，每種變體都以 ESM 和 CJS 格式提供，部分產品 SDK 甚至提供 Cordova 或 React Native 變體。Web SDK 會根據您的工具設定或環境提供正確的變體，在大多數情況下不需要手動選取。所有 SDK 變體版本都旨在協助建構網路應用程式或用戶端應用程式，供使用者存取，例如 Node.js 電腦或 IoT 應用程式。如果您的目標是從具備權限的環境 (例如伺服器) 設定管理存取權，請改用 Firebase Admin SDK。
使用 Bundler 和架構偵測環境
使用 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 選項」初始化應用程式，應用程式使用者可能會遇到嚴重問題。但authDomain例外，可按照使用 signInWithRedirect 的最佳做法更新。如果您在 Firebase 專案中啟用 Google Analytics，設定物件會包含
measurementId欄位。如要進一步瞭解這個欄位，請參閱Analytics入門頁面。如果您在建立 Firebase 網頁應用程式後啟用 Google Analytics 或 Realtime Database，請務必使用相關聯的設定值 (分別為
measurementId和databaseURL) 更新應用程式中使用的 Firebase 設定物件。您可以隨時取得 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", // The value of `storageBucket` depends on when you provisioned your default bucket (learn more) storageBucket: "", messagingSenderId: "SENDER_ID", appId: "APP_ID", // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field measurementId: "G-MEASUREMENT_ID", }; PROJECT_ID.firebasestorage.app
可用的程式庫
其他設定選項
延遲載入 Firebase SDK (來自 CDN)
您可以延後加入 Firebase SDK，直到整個頁面載入完畢為止。如果您使用 <script type="module"> 的模組化 API CDN 指令碼，這是預設行為。如果您使用命名空間 CDN 指令碼做為模組，請完成下列步驟，延後載入：
為 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>建立
init-firebase.js檔案，然後在檔案中加入下列內容：// TODO: Replace the following with your app's Firebase configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
在單一應用程式中使用多個 Firebase 專案
在大多數情況下，您只需要在單一預設應用程式中初始化 Firebase。您可以透過兩種等效方式，從該應用程式存取 Firebase：
Web
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
// 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
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
// 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();
執行本機網路伺服器以進行開發
如果您要建構網頁應用程式，Firebase JavaScript SDK 的某些部分會要求您從伺服器 (而非本機檔案系統) 提供網頁應用程式。您可以使用 Firebase CLI 執行本機伺服器。
如果您已為應用程式設定 Firebase Hosting，可能已完成下列幾個步驟。
如要提供網頁應用程式，請使用指令列工具 Firebase CLI。
初始化 Firebase 專案。 在您本機應用程式目錄的根目錄中執行下列指令：
firebase init
啟動本機伺服器進行開發。在本機應用程式目錄的根目錄中執行下列指令：
firebase serve
Firebase JavaScript SDK 的開放原始碼資源
Firebase 支援開放原始碼開發，並鼓勵社群提供貢獻和意見回饋。
Firebase JavaScript SDK
大多數 Firebase JavaScript SDK 都是在公開的 Firebase GitHub 存放區中，以開放原始碼程式庫的形式開發。
快速入門範例
Firebase 會維護大部分 Firebase API 的快速入門範例集合，適用於網頁。您可以在公開的 Firebase GitHub 快速入門存放區中找到這些快速入門範例。您可以將這些快速入門導覽課程當成使用 Firebase SDK 的程式碼範例。