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

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

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

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

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

  • JavaScript - namespaced. Это интерфейс JavaScript, который Firebase поддерживала много лет и который знаком веб-разработчикам со старыми приложениями Firebase. Поскольку namespaced 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 может быть хорошим выбором.

В итоге:

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

Варианты Firebase Web SDK

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

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

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

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

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

Узнайте больше об объекте конфигурации Firebase

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

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

  • Если вы включили Google Analytics в своем проекте Firebase, ваш объект конфигурации содержит поле measurementId . Узнайте больше об этом поле на странице начала работы Analytics .

  • Если вы включаете Google Analytics или Realtime Database после создания вашего Firebase Web App, убедитесь, что объект конфигурации 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 project 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.

,

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

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

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

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

  • JavaScript - namespaced. Это интерфейс JavaScript, который Firebase поддерживала много лет и который знаком веб-разработчикам со старыми приложениями Firebase. Поскольку namespaced 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 может быть хорошим выбором.

В итоге:

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

Варианты Firebase Web SDK

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

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

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

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

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

Узнайте больше об объекте конфигурации Firebase

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

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

  • Если вы включили Google Analytics в своем проекте Firebase, ваш объект конфигурации содержит поле measurementId . Узнайте больше об этом поле на странице начала работы Analytics .

  • Если вы включаете Google Analytics или Realtime Database после создания вашего Firebase Web App, убедитесь, что объект конфигурации 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 project 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.

,

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

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

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

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

  • JavaScript - namespaced. Это интерфейс JavaScript, который Firebase поддерживала много лет и который знаком веб-разработчикам со старыми приложениями Firebase. Поскольку namespaced 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, предоставляет опции оптимизации для «бездействующего» кода и применения целевых полифиллов, что может значительно уменьшить местопоры вашего приложения. Реализация этих функций может добавить некоторую сложность в вашу конфигурацию и цепочку сборки, но различные основные инструменты CLI могут помочь смягчить это. Эти инструменты включают угловой , React , Vue , Next и другие.

В итоге:

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

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

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

В итоге:

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

Варианты Firebase Web SDK

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

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

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

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

Если ваш код использует Node.js, require операторы, SDK находит пакет для специфического узла. В противном случае, настройки вашего пакета должны быть правильно определены для обнаружения правильного поля точки входа в вашем файле 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)

Вы можете отложить включение 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 project 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. Например, вы можете прочитать данные из базы данных One Firebase Project, но хранить файлы в другом проекте 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 требуют, чтобы вы обслуживали свое веб -приложение с сервера, а не с локальной файловой системы. Вы можете использовать CLI Firebase для запуска локального сервера.

Если вы уже настроили Firebase Hosting для своего приложения, вы, возможно, уже выполнили несколько шагов ниже.

Чтобы обслуживать ваше веб-приложение, вы используете CLI Firebase , инструмент командной строки.

  1. Посетите документацию Firebase CLI, чтобы узнать, как установить CLI или обновить ее в последнюю версию .

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

    firebase init

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

    firebase serve

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

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

Firebase JavaScript SDK

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

QuickStart образцы

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

,

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

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

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

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

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

Модульный API хорошо интегрируется с инструментами сборки, которые разделяют код, который не используется в вашем приложении, процесс, известный как «уборка деревьев». Приложения, построенные с этим 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 . Остальная часть этого раздела содержит информацию, которая поможет вам выбрать из доступных вариантов.

нпм

Загрузка пакета Firebase NPM (который включает в себя как браузер, так и узлы. Загрузка включает в себя node.js и реагирует нативные пакеты в качестве опции для некоторых пакетов. Компания узла.

Использование NPM с модульным объединением, таким как WebPack или Rollup, предоставляет опции оптимизации для «бездействующего» кода и применения целевых полифиллов, что может значительно уменьшить местопоры вашего приложения. Реализация этих функций может добавить некоторую сложность в вашу конфигурацию и цепочку сборки, но различные основные инструменты CLI могут помочь смягчить это. Эти инструменты включают угловой , React , Vue , Next и другие.

В итоге:

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

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

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

В итоге:

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

Варианты Firebase Web SDK

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

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

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

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

Если ваш код использует Node.js, require операторы, SDK находит пакет для специфического узла. В противном случае, настройки вашего пакета должны быть правильно определены для обнаружения правильного поля точки входа в вашем файле 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)

Вы можете отложить включение 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 project 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. Например, вы можете прочитать данные из базы данных One Firebase Project, но хранить файлы в другом проекте 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 требуют, чтобы вы обслуживали свое веб -приложение с сервера, а не с локальной файловой системы. Вы можете использовать CLI Firebase для запуска локального сервера.

Если вы уже настроили Firebase Hosting для своего приложения, вы, возможно, уже выполнили несколько шагов ниже.

Чтобы обслуживать ваше веб-приложение, вы используете CLI Firebase , инструмент командной строки.

  1. Посетите документацию Firebase CLI, чтобы узнать, как установить CLI или обновить ее в последнюю версию .

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

    firebase init

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

    firebase serve

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

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

Firebase JavaScript SDK

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

QuickStart образцы

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