Google 致力于为黑人社区推动种族平等。查看具体举措。

详细了解 Web 和 Firebase

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

当您使用 Firebase 开发 Web 应用程序时，您可能会遇到不熟悉的概念，或者您需要更多信息才能为您的项目做出正确决策的领域。此页面旨在回答这些问题或为您提供资源以了解更多信息。

如果您对本页未涵盖的主题有疑问，请访问我们的在线社区之一。我们还会定期使用新主题更新此页面，因此请回来查看我们是否添加了您想要了解的主题。

SDK 版本 8 和 9

Firebase 为 Web 应用程序提供了两个 SDK 版本：

  • 版本 8。这是 Firebase 维护了数年的 JavaScript 接口，对于使用现有 Firebase 应用程序的 Web 开发人员来说是很熟悉的。由于 Firebase 将在一个主要发布周期后取消对该版本的支持，因此新应用程序应改为采用版本 9。
  • 模块化版本 9 。此 SDK 引入了一种模块化方法，可通过现代 JavaScript 构建工具（例如webpack或Rollup ）提供更小的 SDK 大小和更高的效率。

版本 9 与构建工具很好地集成，可以去除应用中未使用的代码，这一过程称为“摇树”。使用此 SDK 构建的应用程序受益于大大减少的占用空间。第 8 版虽然作为模块提供，但没有严格的模块化结构，也没有提供相同程度的尺寸缩减。

尽管第 9 版 SDK 的大部分遵循与第 8 版相同的模式，但代码的组织方式有所不同。通常，版本 8 面向名称空间和服务模式，而版本 9 面向离散功能。例如，版本 8 的点链（例如 firebaseApp.auth firebaseApp.auth() ) ）在版本 9 中被单个getAuth()函数取代，该函数接受firebaseApp并返回一个 Authentication 实例。

这意味着使用版本 8 或更早版本创建的 Web 应用程序需要重构才能利用版本 9 的模块化方法。 Firebase 提供兼容库来简化这种转换；有关详细信息，请参阅升级指南。

支持什么？

虽然版本 8 和版本 9 具有不同的代码风格，但它们为 Firebase 功能和选项提供了非常相似的支持。正如我们将在本指南中详细描述的那样，这两个 SDK 版本都支持 JavaScript 和 Node.js 变体以及用于添加/安装 SDK 的多个选项。

添加 SDKs 8.0（命名空间） 9.0（模块化）
npm
  • 对于 JavaScript
  • 对于 Node.js
  • 对于 JavaScript
  • 对于 Node.js
CDN（内容分发网络）
  • 对于 JavaScript
  • 对于 JavaScript
托管网址
  • 对于 JavaScript
  • 对于 Node.js

有关更多信息，请参阅本页后面的将 Web SDK 添加到您的应用程序和Firebase Web SDK 变体的方法。

新应用程序版本 9

如果您开始与 Firebase 进行新的集成，则可以在添加和初始化 SDK 时选择使用版本 9 SDK 。

在开发应用程序时，请记住您的代码将主要围绕功能进行组织。在版本 9 中，服务作为第一个参数传递，然后函数使用服务的详细信息来完成其余的工作。例如：

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

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

有关更多示例和详细信息，请参阅每个产品领域的指南以及版本 9 参考文档。

将 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 version 9

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 version 8

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

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 version 8

// 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 的示例代码。