Общие сведения о 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 и другие. Способ добавления Firebase SDK в ваше веб-приложение зависит от того, какие инструменты вы используете в приложении (например, сборщик модулей).

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

  • npm (для сборщиков модулей)
  • CDN (сеть доставки контента)

Подробные инструкции по настройке см. в статье «Добавление Firebase в ваше приложение JavaScript» . Остальная часть этого раздела содержит информацию, которая поможет вам выбрать доступные варианты.

нпм

Загрузка пакета Firebase npm (включающего в себя как браузерные, так и Node.js-пакеты) предоставляет вам локальную копию Firebase SDK, которая может потребоваться для приложений, не использующих браузер, таких как приложения Node.js, React Native или Electron. В комплект поставки входят пакеты Node.js и React Native в качестве опции для некоторых пакетов. Пакеты Node.js необходимы для этапа серверного рендеринга (SSR) фреймворков SSR.

Использование npm с упаковщиком модулей, таким как Webpack или Rollup, предоставляет возможности оптимизации для «tree-shake» неиспользуемого кода и применения целевых полифиллов, что может значительно сократить размер вашего приложения. Реализация этих функций может усложнить конфигурацию и цепочку сборки, но различные распространённые инструменты CLI могут помочь смягчить это. К таким инструментам относятся Angular , React , Vue , Next и другие.

В итоге:

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

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

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

В итоге:

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

Варианты веб-SDK Firebase

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

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

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

При установке Firebase Web SDK с помощью 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",
};

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

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

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

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

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

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

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

    firebase init

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

    firebase serve

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

Firebase поддерживает разработку ПО с открытым исходным кодом, и мы приветствуем вклад и отзывы сообщества.

Firebase JavaScript SDK

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

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

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