Check out what’s new from Firebase at Google I/O 2022. Learn more

Обновление с версии 8 до модульного Web SDK

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

В этом руководстве предполагается, что вы знакомы с версией 8 и воспользуетесь преимуществами сборщика модулей, такого как webpack или Rollup , для обновления и текущей разработки версии 9.

Настоятельно рекомендуется использовать сборщик модулей в вашей среде разработки. Если вы его не используете, вы не сможете воспользоваться основными преимуществами версии 9 в уменьшенном размере приложения. Для установки SDK вам понадобится npm или yarn .

Шаги по обновлению в этом руководстве будут основаны на воображаемом веб-приложении, которое использует SDK аутентификации и Cloud Firestore. Работая с примерами, вы сможете освоить концепции и практические шаги, необходимые для обновления всех поддерживаемых Firebase Web SDK.

О совместимых библиотеках

Для Firebase Web SDK версии 9 доступно два типа библиотек:

  • Modular — новая поверхность API, предназначенная для облегчения встряхивания дерева (удаления неиспользуемого кода), чтобы сделать ваше веб-приложение как можно меньше и быстрее.
  • Compat — знакомая поверхность API, полностью совместимая с SDK версии 8, позволяющая выполнить обновление до версии 9 без одновременного изменения всего кода Firebase. Библиотеки совместимости практически не имеют преимуществ по размеру или производительности по сравнению с аналогами версии 8.

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

Для приложений с очень небольшим воздействием Firebase Web SDK — например, приложение, которое делает только простой вызов API-интерфейсов аутентификации — может оказаться практичным рефакторинг кода версии 8 без использования совместимых библиотек версии 9. Если вы обновляете такое приложение, вы можете следовать инструкциям в этом руководстве для «модульной версии 9», не используя библиотеки совместимости.

О процессе обновления

Каждый шаг процесса обновления ограничен таким образом, чтобы вы могли завершить редактирование исходного кода для своего приложения, а затем скомпилировать и запустить его без поломок. Итак, вот что вы будете делать, чтобы обновить приложение:

  1. Добавьте библиотеки версии 9 и совместимые библиотеки в свое приложение.
  2. Обновите операторы импорта в своем коде до совместимости с v9.
  3. Рефакторинг кода отдельного продукта (например, Аутентификация) на модульный стиль.
  4. Необязательно: на этом этапе удалите библиотеку совместимости проверки подлинности и код совместимости для проверки подлинности, чтобы реализовать преимущество размера приложения для проверки подлинности, прежде чем продолжить.
  5. Рефакторинг функций для каждого продукта (например, Cloud Firestore, FCM и т. д.) в модульном стиле, компиляция и тестирование, пока все области не будут завершены.
  6. Обновите код инициализации до модульного стиля.
  7. Удалите все оставшиеся операторы совместимости версии 9 и код совместимости из своего приложения.

Получить версию 9 SDK

Для начала получите библиотеки версии 9 и совместимые библиотеки с помощью npm:

npm i firebase@9.8.1

# OR

yarn add firebase@9.8.1

Обновить импорт до совместимости с v9

Чтобы ваш код продолжал работать после обновления вашей зависимости от бета-версии v8 до v9, измените операторы импорта, чтобы использовать «совместимую» версию каждого импорта. Например:

До: версия 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

После: совместимость с версией 9

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Рефакторинг в модульный стиль

В то время как API версии 8 основаны на точечной цепочке пространства имен и шаблоне обслуживания, модульный подход версии 9 означает, что ваш код будет организован главным образом вокруг функций . В версии 9 пакет firebase/app и другие пакеты не возвращают полный экспорт, содержащий все методы из пакета. Вместо этого пакеты экспортируют отдельные функции.

В версии 9 услуги передаются в качестве первого аргумента, а затем функция использует сведения о службе, чтобы сделать все остальное. Давайте рассмотрим, как это работает, на двух примерах, которые рефакторят вызовы API аутентификации и Cloud Firestore.

Пример 1: рефакторинг функции аутентификации

До: версия 9 совместима

Код совместимости версии 9 идентичен коду версии 8, но импорт изменился.

import firebase from "firebase/compat/app";
import "firebase/compat/auth";

const auth = firebase.auth();
auth.onAuthStateChanged(user => { 
  // Check for user status
});

После: версия 9 модульная

Функция getAuth принимает firebaseApp в качестве первого параметра. Функция onAuthStateChanged не связана с экземпляром auth , как это было бы в версии 8; вместо этого это бесплатная функция, которая принимает auth в качестве первого параметра.

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

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

Пример 2: рефакторинг функции Cloud Firestore

До: версия 9 совместима

import "firebase/compat/firestore"

const db = firebase.firestore();
db.collection("cities").where("capital", "==", true)
    .get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch((error) => {
        console.log("Error getting documents: ", error);
    });

После: версия 9 модульная

Функция getFirestore принимает firebaseApp в качестве первого параметра, который был возвращен из initializeApp в более раннем примере. Обратите внимание, что код для формирования запроса сильно отличается в версии 9; цепочки нет, а такие методы, как query или where , теперь доступны как бесплатные функции.

import { getFirestore, collection, query, where, getDocs } from "firebase/firestore";

const db = getFirestore(firebaseApp);

const q = query(collection(db, "cities"), where("capital", "==", true));

const querySnapshot = await getDocs(q);
querySnapshot.forEach((doc) => {
  // doc.data() is never undefined for query doc snapshots
  console.log(doc.id, " => ", doc.data());
});

Обновить ссылки на Firestore DocumentSnapshot.exists

В версии 9 представлено критическое изменение, в котором свойство firestore.DocumentSnapshot.exists было изменено на метод . Функциональность по существу такая же (проверка существования документа), но вы должны реорганизовать свой код, чтобы использовать метод v9, как показано ниже:

До: версия 9 совместима

if (snapshot.exists) {
  console.log("the document exists");
}

После: версия 9 модульная

if (snapshot.exists()) {
  console.log("the document exists");
}

Пример 3: сочетание стилей кода версии 8 и версии 9

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

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'

const docRef = firebase.firestore().doc();
getDoc(docRef);

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

Обновить код инициализации

Обновите код инициализации вашего приложения, чтобы использовать новый модульный синтаксис версии 9. Важно обновить этот код после завершения рефакторинга всего кода в приложении; это связано с тем, что firebase.initializeApp() инициализирует глобальное состояние как для совместимого, так и для модульного API, тогда как модульная функция initializeApp initializeApp() инициализирует только состояние для модульного.

До: версия 9 совместима

import firebase from "firebase/compat/app"

firebase.initializeApp({ /* config */ });

После: версия 9 модульная

import { initializeApp } from "firebase/app"

const firebaseApp = initializeApp({ /* config */ });

Удалить код совместимости

Чтобы реализовать преимущества размера модульного SDK версии 9, вы должны в конечном итоге преобразовать все вызовы в модульный стиль, показанный выше, и удалить все операторы import "firebase/compat/* из вашего кода. Когда вы закончите, не должно быть никаких дополнительные ссылки на глобальное пространство имен firebase.* или любой другой код в стиле SDK версии 8.

Использование библиотеки совместимости из окна

SDK версии 9 оптимизирован для работы с модулями, а не с объектом window браузера. Предыдущие версии библиотеки позволяли загружать и управлять Firebase с помощью пространства имен window.firebase . Это не рекомендуется в дальнейшем, поскольку это не позволяет исключить неиспользуемый код. Однако совместимая версия JavaScript SDK работает с window для разработчиков, которые предпочитают не сразу начинать путь модульного обновления.

<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-auth-compat.js"></script>
<script>
   const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
   const db = firebaseApp.firestore();
   const auth = firebaseApp.auth();
</script>

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

Преимущества и ограничения версии 9

Полностью модульная версия 9 имеет следующие преимущества по сравнению с более ранними версиями:

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