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

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

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

SDK версий 8 и 9

Firebase предоставляет две версии SDK для веб-приложений, одна из которых в настоящее время находится в стадии бета-тестирования:

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

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

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

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

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

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

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

Для получения дополнительной информации см Путей , чтобы добавить веб - SDKs к вашему приложению и Firebase Web SDK варианте ниже на этой странице.

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

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

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

  • npm (для сборщиков модулей и Node.js)
  • CDN (сеть доставки контента)
  • URL-адреса хостинга Firebase

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

npm

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

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

В итоге:

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

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

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

В итоге:

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

URL-адреса хостинга

Хостинг Firebase предоставляет зарезервированные URL-адреса, которые позволяют повысить производительность, загружая файлы из одного источника. Если вы уже используете или планируете использовать Firebase Hosting в своем приложении, вы можете добавить JavaScript SDK через URL-адреса хостинга и получить выгоду от этого увеличения производительности. Кроме того, этот метод поддерживает автоматическую инициализацию SDK, что может упростить управление несколькими средами, такими как разработка, подготовка и производство. Подробнее о добавлении SDKs через зарезервированный хостинг URL - адреса .

В итоге:

  • Обеспечивает небольшое преимущество в производительности по сравнению с CDN
  • Может упростить работу в нескольких средах разработки
  • Удобно для приложений, уже использующих Firebase Hosting

Варианты Firebase Web SDK

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

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

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

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

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

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

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

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

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

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

  1. Добавить defer флаг каждого script тега для Firebase SDKs, затем отложить инициализацию Firebase с использованием второго сценария, например:

    <script defer src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.8.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. Создание init-firebase.js файл, а затем включают в себя следующее в файле:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Используйте несколько проектов Firebase в одном приложении

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    firebase init

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

    firebase serve

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

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

SDK Firebase для JavaScript

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

Примеры быстрого запуска

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