Узнайте больше о Интернете и Firebase

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

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

SDK версии 8 и 9

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

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

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

Хотя большая часть SDK версии 9 следует тем же шаблонам, что и версия 8, организация кода отличается. Как правило, версия 8 ориентирована на пространство имен и шаблон службы, тогда как версия 9 ориентирована на дискретные функции. Например, цепочка точек версии 8, такая как firebaseApp.auth() , заменена в версии 9 одной функцией getAuth() , которая принимает firebaseApp и возвращает экземпляр Authentication.

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

Что поддерживается?

Хотя версии 8 и 9 имеют разные стили кода, они обеспечивают очень похожую поддержку функций и параметров Firebase. Как мы подробно опишем в этом руководстве, обе версии SDK поддерживают варианты JavaScript и Node.js, а также несколько вариантов добавления/установки SDK.

Добавьте SDK с помощью 8.0 (в пространстве имен) 9.0 (модульный)
нпм
  • Для JavaScript
  • Для Node.js
  • Для JavaScript
  • Для Node.js
CDN (сеть доставки контента)
  • Для JavaScript
  • Для JavaScript
URL-адреса хостинга
  • Для JavaScript
  • Для Node.js

Дополнительные сведения см. в разделе Способы добавления веб-пакетов SDK в ваше приложение и варианты веб-пакетов SDK Firebase далее на этой странице.

Версия 9 для новых приложений

Если вы начинаете новую интеграцию с Firebase, вы можете выбрать SDK версии 9 при добавлении и инициализации SDK .

При разработке приложения помните, что ваш код будет организован в основном вокруг функций . В версии 9 услуги передаются в качестве первого аргумента, а затем функция использует сведения о службе, чтобы сделать все остальное. Например:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

Дополнительные примеры и подробности см. в руководствах по каждой области продуктов, а также в справочной документации версии 9 .

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

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

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

  • npm (для сборщиков модулей и Node.js)
  • 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 могут помочь смягчить это. Эти инструменты включают Angular , React , Vue , Next и другие.

В итоге:

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

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

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

В итоге:

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

Варианты Firebase Web SDK

В настоящее время Firebase предоставляет два варианта веб-SDK:

  • Пакет JavaScript, поддерживающий все функции Firebase для использования в браузере.
  • Клиентский пакет Node.js, поддерживающий многие, но не все, функции Firebase. См. список поддерживаемых сред .

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

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

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

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

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

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

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

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

  • Если вы включаете Google Analytics или базу данных в реальном времени после создания веб-приложения 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",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

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

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

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

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

  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 version 9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

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

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();
app_default_init_options.js

Web version 8

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

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

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();
firebaseapp.js

Однако иногда вам нужно получить доступ к нескольким проектам Firebase одновременно. Например, вы можете захотеть прочитать данные из базы данных одного проекта Firebase, но сохранить файлы в другом проекте Firebase. Или вы можете захотеть аутентифицировать один проект, оставив второй проект неаутентифицированным.

Firebase JavaScript SDK позволяет одновременно инициализировать и использовать несколько проектов Firebase в одном приложении, при этом каждый проект использует собственную информацию о конфигурации Firebase.

Web version 9

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

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

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

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

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);
app_multi_project_init_options.js

Web version 8

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

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

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

Запустите локальный веб-сервер для разработки

Если вы создаете веб-приложение, некоторые части Firebase JavaScript SDK требуют, чтобы вы обслуживали свое веб-приложение с сервера, а не из локальной файловой системы. Вы можете использовать Firebase CLI для запуска локального сервера.

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

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

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

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

    firebase init

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

    firebase serve

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

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

SDK Firebase для JavaScript

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

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

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