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

详细了解 Web 和 Firebase

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

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

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

SDK 版本 8 和 9

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

  • 版本 8。这是 Firebase 多年来一直维护的 JavaScript 界面，并且对于使用现有 Firebase 应用程序的 Web 开发人员来说是熟悉的。由于 Firebase 将在一个主要发布周期后取消对该版本的支持，因此新应用应改为采用版本 9。
  • 模块化版本 9 .此 SDK 引入了一种模块化方法，可通过webpack或Rollup等现代 JavaScript 构建工具减少 SDK 大小并提高效率。

版本 9 与构建工具很好地集成了，这些工具可以去除您的应用程序中未使用的代码，这一过程称为“tree-shaking”。使用此 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 的几个选项。

添加 SDK 8.0（命名空间） 9.0（模块化）
npm
  • 对于 JavaScript
  • 对于 Node.js
  • 对于 JavaScript
  • 对于 Node.js
CDN（内容交付网络）
  • 对于 JavaScript
  • 对于 JavaScript
托管 URL
  • 对于 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 网络 SDK 变体

目前，Firebase 提供两种 Web SDK 变体：

  • 一个 JavaScript 包，支持在浏览器中使用的所有 Firebase 功能。
  • 一个客户端 Node.js 包，支持许多（但不是全部）Firebase 功能。请参阅支持的环境列表。

这两种 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">的版本 9 CDN 脚本，这是默认行为。如果您使用版本 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 的示例代码。