Общие сведения о Firebase для Интернета

При разработке веб-приложения с использованием Firebase вы можете столкнуться с незнакомыми концепциями или областями, где вам потребуется дополнительная информация для принятия правильных решений по вашему проекту. Эта страница призвана ответить на эти вопросы или указать на ресурсы для получения дополнительной информации.

Если у вас есть вопросы по теме, не освещенной на этой странице, посетите одно из наших онлайн-сообществ . Мы также будем периодически обновлять эту страницу новыми темами, поэтому заглядывайте сюда, чтобы узнать, не добавили ли мы интересующую вас тему.

Версии SDK: с пространством имен и модульный

Firebase предоставляет два API-интерфейса для веб-приложений:

  • JavaScript — с пространствами имен. Это интерфейс JavaScript, который Firebase поддерживала на протяжении многих лет и который знаком веб-разработчикам, работающим со старыми приложениями Firebase. Поскольку API с пространствами имен не получает преимуществ от постоянной поддержки новых функций, большинству новых приложений следует вместо этого использовать модульный API.
  • JavaScript — модульный . Этот SDK основан на модульном подходе, который обеспечивает уменьшенный размер SDK и большую эффективность при работе с современными инструментами сборки JavaScript, такими как webpack или Rollup .

Модульный API хорошо интегрируется с инструментами сборки, которые удаляют неиспользуемый код из вашего приложения — процесс, известный как «tree-shaking». Приложения, созданные с помощью этого SDK, выигрывают от значительного уменьшения размера. API с пространствами имен, хотя и доступен в виде модуля, не имеет строго модульной структуры и не обеспечивает такой же степени уменьшения размера.

Хотя большая часть модульного API следует тем же шаблонам, что и API с пространствами имен, организация кода отличается. В целом, API с пространствами имен ориентирован на шаблон пространства имен и сервиса, в то время как модульный API ориентирован на дискретные функции. Например, цепочка вызовов в API с пространствами имен, такая как firebaseApp.auth() , в модульном API заменяется одной функцией getAuth() , которая принимает 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 .

Способы добавления веб-SDK в ваше приложение

Firebase предоставляет библиотеки JavaScript для большинства продуктов Firebase, включая Remote Config , FCM и другие. Способ добавления SDK Firebase в ваше веб-приложение зависит от того, какие инструменты вы используете в своем приложении (например, сборщик модулей).

Вы можете добавить любую из доступных библиотек в свое приложение одним из поддерживаемых способов:

  • npm (для сборщиков модулей)
  • 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, предоставляет возможности оптимизации для удаления неиспользуемого кода и применения целевых полифилов, что может значительно уменьшить размер вашего приложения. Внедрение этих функций может добавить некоторую сложность в вашу конфигурацию и цепочку сборки, но различные популярные инструменты командной строки могут помочь это смягчить. К таким инструментам относятся Angular , React , Vue , Next и другие.

В итоге:

  • Обеспечивает ценную оптимизацию размера приложения.
  • Для управления модулями доступны надежные инструменты.
  • Требуется для SSR с Node.js

CDN (сеть доставки контента)

Добавление библиотек, хранящихся на CDN Firebase, — это простой метод настройки SDK, знакомый многим разработчикам. Используя CDN для добавления SDK, вам не понадобится инструмент сборки, и ваша цепочка сборки может быть проще и удобнее в работе по сравнению с модульными сборщиками. Если вас не особенно беспокоит размер установленного приложения и у вас нет особых требований, таких как транспиляция из TypeScript, то CDN может быть хорошим выбором.

В итоге:

  • Привычный и простой
  • Подходит в случаях, когда размер приложения не является определяющим фактором.
  • Подходит, если ваш веб-сайт не использует инструменты сборки.

Варианты Firebase Web SDK

Веб-SDK Firebase можно использовать как в браузерных, так и в Node-приложениях. Однако некоторые продукты недоступны в средах Node. См. список поддерживаемых сред .

Некоторые SDK для продуктов предоставляют отдельные варианты для браузеров и Node, каждый из которых доступен как в формате ESM, так и в формате CJS, а некоторые SDK даже предоставляют варианты для Cordova или React Native. Веб-SDK настраивается таким образом, чтобы предоставлять правильный вариант в зависимости от конфигурации ваших инструментов или среды, и в большинстве случаев не требует ручного выбора. Все варианты SDK предназначены для создания веб-приложений или клиентских приложений для доступа конечных пользователей, например, в настольных приложениях Node.js или IoT-приложениях. Если ваша цель — настроить административный доступ из привилегированных сред (например, серверов), используйте вместо этого Firebase Admin SDK .

Обнаружение окружения с помощью сборщиков и фреймворков

При установке веб-SDK Firebase с помощью npm устанавливаются как версии JavaScript, так и Node.js. Пакет обеспечивает детальное определение среды, позволяющее включить необходимые пакеты для вашего приложения.

Если ваш код использует операторы require Node.js, SDK находит пакет, специфичный для Node.js. В противном случае, настройки вашего сборщика должны быть правильно определены для обнаружения нужного поля точки входа в файле package.json (например, ` main , browser или module ). Если вы сталкиваетесь с ошибками во время выполнения SDK, убедитесь, что ваш сборщик настроен на приоритетное использование правильного типа пакета для вашей среды.

Узнайте о конфигурационном объекте Firebase.

Для инициализации Firebase в вашем приложении необходимо предоставить конфигурацию Firebase вашего приложения. Вы можете получить объект конфигурации Firebase в любое время.

  • Мы не рекомендуем вручную редактировать объект конфигурации, особенно следующие обязательные параметры Firebase: apiKey , projectId и appID . Если вы инициализируете приложение с недопустимыми или отсутствующими значениями для этих обязательных параметров Firebase, пользователи вашего приложения могут столкнуться с серьезными проблемами. Исключением является authDomain , который можно обновить, следуя рекомендациям по использованию signInWithRedirect .

  • Если вы включили Google Analytics в своем проекте Firebase, ваш объект конфигурации содержит поле measurementId . Подробнее об этом поле можно узнать на странице «Начало работы 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

Доступные библиотеки

Дополнительные параметры настройки

Отложенная загрузка SDK Firebase (с CDN)

Вы можете отложить включение SDK Firebase до полной загрузки страницы. Если вы используете модульные CDN-скрипты API с <script type="module"> , это поведение по умолчанию. Если вы используете CDN-скрипты с пространством имен в качестве модуля, выполните следующие действия, чтобы отложить загрузку:

  1. Добавьте флаг defer к каждому тегу script для SDK Firebase, затем отложите инициализацию 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 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. Или может потребоваться аутентификация одного проекта, в то время как второй проект останется неаутентифицированным.

SDK Firebase JavaScript позволяет инициализировать и использовать несколько проектов 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);
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. Чтобы узнать, как установить CLI или обновить его до последней версии , посетите документацию Firebase CLI.

  2. Инициализируйте свой проект Firebase. Выполните следующую команду из корневой директории локального каталога вашего приложения: 

    firebase init

  3. Запустите локальный сервер для разработки. Выполните следующую команду из корневого каталога вашего локального приложения: 

    firebase serve

Ресурсы с открытым исходным кодом для JavaScript SDK Firebase

Firebase поддерживает разработку программного обеспечения с открытым исходным кодом, и мы приветствуем вклад и обратную связь от сообщества.

SDK Firebase для JavaScript

Большинство JavaScript SDK для Firebase разрабатываются как библиотеки с открытым исходным кодом в нашем общедоступном репозитории Firebase на GitHub .

Примеры для быстрого старта

Firebase поддерживает коллекцию примеров быстрого запуска для большинства веб-API Firebase. Эти примеры можно найти в нашем общедоступном репозитории Firebase на GitHub . Вы можете использовать эти примеры кода для работы с SDK Firebase.