Google 致力于为黑人社区推动种族平等。查看具体举措
此页面由 Cloud Translation API 翻译。
Switch to English

了解有关Web和Firebase的更多信息

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

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

SDK版本8和9

Firebase为Web应用程序提供了两个SDK版本,其中一个当前处于Beta中:

  • 版本8。这是Firebase维护了几年的JavaScript接口,对于使用现有Firebase应用程序的Web开发人员来说是熟悉的。
  • 模块化版本9(Beta) 。此SDK引入了一种模块化方法,可通过WebpackRollup等现代JavaScript构建工具来减小SDK的大小并提高效率。

版本9与构建工具很好地集成在一起,该构建工具可以删除您的应用程序中未使用的代码,该过程称为“摇树”。使用此SDK构建的应用程序可从大大减小的尺寸占用中受益。版本8尽管可以作为模块使用,但它没有严格的模块化结构,并且无法提供相同程度的尺寸减小。

尽管大多数版本9 SDK遵循与版本8相同的模式,但是代码的组织却不同。通常,版本8面向名称空间和服务模式,而版本9面向离散功能。例如,版本8点的点链接,如firebaseApp.auth()由单个替换版本9 getAuth()函数,它接受firebaseApp和返回认证实例。

这意味着使用版本8或更早版本创建的Web应用程序需要进行重构,以利用版本9的模块化方法。 Firebase提供了兼容库来简化这种过渡。有关更多详细信息,请参见升级指南

支持什么?

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

使用以下方式添加SDK 8.0(命名空间) 9.0(模块化Beta版)
npm
  • 对于JavaScript
  • 对于Node.js
  • 对于JavaScript
  • 对于Node.js
CDN(内容交付网络)
  • 对于JavaScript
  • 即将推出JavaScript
托管网址
  • 对于JavaScript
  • 对于Node.js
  • 即将推出JavaScript和Node.js

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

新应用程式的第9版

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

在开发应用程序时,请记住,您的代码将主要围绕function进行组织。在版本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应用程序取决于您是否选择对应用程序使用Firebase托管,与应用程序一起使用的工具(例如模块捆绑器),或者应用程序是否在非浏览器中运行环境,例如Node.js。

您可以通过一种受支持的方法将任何可用的库添加到您的应用程序:

  • npm(用于模块捆绑器和Node.js)
  • CDN(内容交付网络)
  • Firebase托管URL

有关每种方法的详细设置说明,请参阅将Firebase添加到您的JavaScript应用。本节的其余部分包含可帮助您从可用选项中进行选择的信息。

npm

下载Firebase npm软件包(包括浏览器和Node.js捆绑包)会为您提供Firebase SDK的本地副本,非浏览器应用程序(例如Node.js应用程序,React Native或Electron)可能需要Firebase SDK的本地副本。该下载包含Node.js和React Native捆绑包,作为某些软件包的选项。对于SSR框架的服务器端呈现(SSR)步骤,Node.js包是必需的。

将npm与模块打包程序(例如WebpackRollup)一起使用可提供优化选项,以“摇动”未使用的代码并应用目标的polyfill,这可以大大减少应用程序的尺寸。实施这些功能可能会给您的配置和构建链增加一些复杂性,但是各种主流的CLI工具可以帮助减轻这种情况。这些工具包括AngularReactVueNext等。

总之:

  • 提供有价值的应用程序大小优化
  • 强大的工具可用于管理模块
  • 使用Node.js进行SSR必需

CDN(内容交付网络)

添加存储在Firebase CDN上的库是一种简单的SDK设置方法,许多开发人员可能都很熟悉。使用CDN添加SDK时,您将不需要构建工具,并且与模块捆绑器相比,构建链可能更容易使用。如果您不特别关注应用程序的安装大小,并且没有诸如从TypeScript进行编译之类的特殊要求,那么CDN可能是一个不错的选择。

总之:

  • 熟悉而简单
  • 当应用程序大小不是主要问题时适当
  • 适用于您的网站不使用构建工具的情况。

托管网址

Firebase托管提供保留的URL,这些URL可让您通过加载来自相同来源的文件来提高性能。如果您已经在应用程序中使用或计划使用Firebase托管,则可以通过托管URL添加JavaScript SDK,并从此性能提升中受益。此外,此方法支持SDK的自动初始化,从而可以简化对多个环境(例如开发,登台和生产)的管理。了解有关通过保留的主机URL添加SDK的更多信息。

总之:

  • 与CDN相比,性能略有优势
  • 可以简化在多个开发环境中的工作
  • 方便已使用Firebase托管的应用

Firebase Web SDK变体

当前,Firebase提供了两个Web SDK变体:

  • 一个支持所有Firebase功能的JavaScript套件,可在浏览器中使用。
  • 客户端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文件中的正确入口点字段(例如mainbrowsermodule )。如果您在使用SDK时遇到运行时错误,请检查以确保将捆绑程序配置为根据您的环境确定正确的捆绑类型。

可用库

其他设置选项

延迟加载Firebase SDK(来自CDN)

您可以延迟Firebase SDK的包含,直到整个页面加载完毕。

  1. 为Firebase SDK的每个script标签添加一个defer标志,然后使用第二个脚本来延迟Firebase的初始化,例如:

    <script defer src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.4.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:

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var 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配置信息。

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

运行本地Web服务器进行开发

如果您要构建Web应用程序,则Firebase JavaScript SDK的某些部分要求您从服务器而不是本地文件系统提供Web应用程序。您可以使用Firebase CLI运行本地服务器。

如果您已经为您的应用设置了Firebase Hosting,则可能已经完成了以下几个步骤。

要提供您的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的示例代码。