瞭解 Firebase 網頁版

使用 Firebase 開發網頁應用程式時，可能會遇到不熟悉 您還需要更多資訊才能做出正確決策 。本頁面旨在解答這些問題，或引導你 資源。

如果您對本頁未提及的主題有疑問，請造訪 線上社群。 本網頁也會定期更新主題 請稍後再回來查看我們是否已新增您想要瞭解的主題。

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

Firebase 為網頁應用程式提供兩個 API 介面：

  • JavaScript：命名空間。這是 Firebase 提供的 JavaScript 介面 長期維護，對資深網頁開發人員來說都很熟悉 Firebase 應用程式。因為命名空間 API 無法受益於 支援新功能，因此大部分的新應用程式都應改用模組化 API。
  • JavaScript - 模組化：這個 SDK 是以模組化方法為基礎 透過新型 JavaScript 縮減 SDK 大小並提升效率 建立工具，例如 webpack 或 匯總：

模組化 API 與建構工具完美整合，可移除 也就是所謂的「樹動搖擺」程序使用這個 SDK 建構的應用程式 能大幅減少佔用空間命名空間 API 模組，沒有嚴謹的模組化結構，且不提供 大小降至相同程度

雖然大部分的模組化 API 都採用與命名空間 API 相同的模式 程式碼的組織方式不同一般來說，命名空間 API 是 導向命名空間和服務模式，而模組 API 則著重於 各自投入函式例如，命名空間 API 的點鏈結 (如 firebaseApp.auth()，會由單一 getAuth() 函式取代模組化 API 該物件會取用 firebaseApp 並傳回 Authentication 例項。

這表示使用命名空間 API 建立的網頁應用程式，會 重構，以充分利用模組化應用程式設計。 詳情請參閱 升級指南。

JavaScript - 適用於新應用程式的模組化 API

如果您是要開始進行新的 Firebase 整合，可以選擇啟用 模組化 API 新增並初始化 SDK。

開發應用程式時，請注意您的程式碼將會井然有序 主要為函式在模組化 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 加入 網頁應用程式取決於您搭配應用程式使用的工具 (例如模組) Bundler)。

您可以將任何 可用的程式庫， 支援的方法：

  • npm (適用於模組套裝組合)
  • CDN (內容傳遞網路)

如需詳細設定指示，請參閱： 將 Firebase 新增至您的 JavaScript 應用程式。本節其餘部分 包含各種資訊，可協助您從可用選項中進行選擇。

npm

下載 Firebase npm 套件 (包含瀏覽器和 Node.js 套裝組合) 會提供 Firebase SDK 的本機副本 (可能需要您用到該版本) ，例如 Node.js 應用程式、React Native 或 Electron 等非瀏覽器應用程式 下載內容中包含 Node.js 和 React Native Bundle 套件伺服器端轉譯 (SSR) 必須使用 Node.js 套裝組合 建立 SSR 架構的步驟

搭配使用 npm 與模組整合器，例如 webpack 或 綜覽功能可進行最佳化 「樹枝」的選項未使用的程式碼，並套用指定的 polyfill；這可以 可有效減少應用程式的規模導入這些功能之後 會增加設定和建構鏈的複雜性，但 主流 CLI 工具可協助您減輕這個問題。這些工具包括 Angular、 React， Vue、 下一步等。

簡單來說：

  • 能針對應用程式大小進行最佳化調整
  • 提供完善的工具管理模組
  • 使用 Node.js 的 SSR 必須提供

CDN (內容傳遞網路)

新增儲存在 Firebase CDN 中的程式庫 是許多開發人員熟悉的簡易 SDK 設定方法。使用 透過 CDN 新增 SDK，不需要建構工具，您的建構鏈可能會 ，比起模組套裝組合，更輕鬆、更容易使用。 您可以在這裡 應用程式安裝大小，且沒有特殊需求，例如 非常適合使用 CDN

簡單來說：

  • 熟悉又簡潔
  • 適合未使用應用程式大小的使用者
  • 適合網站未使用建構工具的情況。

Firebase Web SDK 變化版本

Firebase 的 Web SDK 可同時用於瀏覽器和節點應用程式。 不過，在 Node 環境中無法使用幾項產品。 請參閱支援的環境清單。

部分產品 SDK 提供不同的瀏覽器和節點變化版本， ESM 和 CJS 兩種格式皆可使用，有些產品 SDK 甚至還提供 Cordova 或 React Native 變化版本。Web SDK 設定為 根據您的工具設定或環境而定，正確的變化版本，但請勿 在多數情況下，您必須手動選取。所有 SDK 變化版本都是設計成 協助建構網頁應用程式或用戶端應用程式 提供使用者存取權，例如在 Node.js 桌面或 IoT 應用程式中。如果您的 目標是設定來自具有特殊權限的環境 (例如 伺服器)，請使用 Firebase Admin SDK。

使用組合器和架構進行環境偵測

使用 npm、JavaScript 和 Node.js 安裝 Firebase Web SDK 時 兩個版本都已安裝套件提供詳細的環境偵測 即可為應用程式啟用合適的套件。

如果程式碼使用 Node.js require 陳述式，SDK 會尋找節點專屬的 軟體包。否則，請務必正確模擬您的套裝組合設定，系統才能偵測 在 package.json 檔案中加入正確的進入點欄位 (例如 main、 browser 或 module)。如果 SDK 發生執行階段錯誤，請檢查 請確認套裝組合已妥善設定，優先使用正確的套件類型 適合環境

瞭解 Firebase 設定物件

如要在應用程式中初始化 Firebase，您必須提供應用程式的 Firebase 專案設定您可以取得 Firebase 設定 物件。

  • 我們不建議手動編輯設定物件，尤其是 下列必要的「Firebase 選項」：apiKey、projectId 和 appID。如果 您利用這些必填值無效或缺少的值來初始化應用程式 「Firebase 選項」是應用程式的使用者可能會遇到嚴重的問題。 唯一的例外是 authDomain，您可以更新以下項目： 使用 signInWithRedirect 的最佳做法。

  • 如果您已經在 Firebase 專案中啟用 Google Analytics，您的設定就會是 物件包含「measurementId」欄位。如要進一步瞭解這個欄位，請前往 Analytics入門指南。

  • 如果您在建立「Google Analytics」後啟用 Google Analytics 或 Realtime Database Firebase 網頁應用程式，請確定您在其中使用的 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，直到整個頁面出現 就會引發這個事件。如果您將模組化 API CDN 指令碼與 <script type="module"> 搭配使用， 這是預設行為如果使用命名空間 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

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

// 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 專案 。 設定資訊

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);
app_multi_project_init_options.js

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();
firebaseapp.js

執行用於開發的本機網路伺服器

如果您建構的是網頁應用程式，Firebase JavaScript SDK 的某些部分會要求 您是透過伺服器提供網頁應用程式，而非從本機檔案系統提供。個人中心 可以使用 Firebase CLI 執行本機伺服器。

如果您已為應用程式設定 Firebase Hosting，您可能已經 完成以下步驟中

如要提供網頁應用程式，請使用 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 針對多數 Firebase API，維護一組快速入門範例： 網頁。在我們的公開網站上尋找這些快速入門導覽課程 Firebase GitHub 快速入門導覽課程存放區。 這些快速入門導覽課程可做為使用 Firebase SDK 的程式碼範例。