Приложениям, которые в настоящее время используют 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», не используя библиотеки совместимости.
О процессе обновления
Каждый шаг процесса обновления ограничен таким образом, чтобы вы могли завершить редактирование исходного кода для своего приложения, а затем скомпилировать и запустить его без поломок. Итак, вот что вы будете делать, чтобы обновить приложение:
- Добавьте библиотеки версии 9 и совместимые библиотеки в свое приложение.
- Обновите операторы импорта в своем коде до совместимости с v9.
- Рефакторинг кода отдельного продукта (например, Аутентификация) на модульный стиль.
- Необязательно: на этом этапе удалите библиотеку совместимости проверки подлинности и код совместимости для проверки подлинности, чтобы реализовать преимущество размера приложения для проверки подлинности, прежде чем продолжить.
- Рефакторинг функций для каждого продукта (например, Cloud Firestore, FCM и т. д.) в модульном стиле, компиляция и тестирование, пока все области не будут завершены.
- Обновите код инициализации до модульного стиля.
- Удалите все оставшиеся операторы совместимости версии 9 и код совместимости из своего приложения.
Получить версию 9 SDK
Для начала получите библиотеки версии 9 и совместимые библиотеки с помощью npm:
npm i firebase@9.22.1 # OR yarn add firebase@9.22.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
});
Обновление обработки метода Auth getRedirectResult
Версия 9 вносит критическое изменение в getRedirectResult . Когда операция перенаправления не вызывается, версия 9 возвращает null , в отличие от версии 8, которая возвращает UserCredential с null пользователем.
До: версия 9 совместима
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
После: версия 9 модульная
const result = await getRedirectResult(auth);
// Provider of the access token could be Facebook, Github, etc.
if (result === null || provider.credentialFromResult(result) === null) {
return null;
}
return result;
Пример 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.22.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.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 будет заморожена в какой-то момент в будущем.