Aplikacje korzystające obecnie z pakietu Firebase Web SDK w wersji 8 lub starszej powinny rozważyć migrację do wersji 9 zgodnie z instrukcjami w tym przewodniku.
W tym przewodniku założono, że znasz wersję 8 i skorzystasz z pakietu modułów, takiego jak webpack lub Rollup , do aktualizacji i ciągłego rozwoju wersji 9.
Zdecydowanie zaleca się używanie pakietu modułów w środowisku programistycznym. Jeśli go nie używasz, nie będziesz mógł korzystać z głównych zalet wersji 9 w postaci zmniejszonego rozmiaru aplikacji. Aby zainstalować pakiet SDK, potrzebujesz npm lub przędzy .
Kroki uaktualniania opisane w tym przewodniku będą oparte na wyimaginowanej aplikacji internetowej, która korzysta z pakietów SDK uwierzytelniania i Cloud Firestore. Korzystając z przykładów, możesz opanować koncepcje i praktyczne kroki wymagane do uaktualnienia wszystkich obsługiwanych internetowych pakietów SDK Firebase.
O bibliotekach kompatybilnych
W przypadku pakietu Firebase Web SDK w wersji 9 dostępne są dwa typy bibliotek:
- Modular — nowa powierzchnia API zaprojektowana w celu ułatwienia trząsania drzewami (usuwania nieużywanego kodu), aby Twoja aplikacja internetowa była tak mała i szybka, jak to tylko możliwe.
- Compat — znajoma powierzchnia interfejsu API, która jest w pełni zgodna z pakietem SDK w wersji 8, umożliwiając uaktualnienie do wersji 9 bez jednoczesnej zmiany całego kodu Firebase. Biblioteki Compat mają niewielką lub żadną przewagę pod względem wielkości lub wydajności w porównaniu z ich odpowiednikami w wersji 8.
W tym przewodniku założono, że skorzystasz z bibliotek zgodnych z wersją 9, aby ułatwić aktualizację. Te biblioteki umożliwiają dalsze korzystanie z kodu w wersji 8 wraz z kodem zrefaktoryzowanym dla wersji 9. Oznacza to, że możesz łatwiej kompilować i debugować aplikację w trakcie procesu uaktualniania.
W przypadku aplikacji z bardzo małą ekspozycją na pakiet Firebase Web SDK — na przykład aplikacji, która wykonuje tylko proste wywołanie interfejsów API uwierzytelniania — praktyczne może być zrefaktorowanie kodu w wersji 8 bez korzystania z bibliotek zgodności w wersji 9. Jeśli aktualizujesz taką aplikację, możesz postępować zgodnie z instrukcjami zawartymi w tym przewodniku dla „modułowej wersji 9” bez korzystania z bibliotek zgodności.
O procesie aktualizacji
Każdy krok procesu uaktualniania jest objęty zakresem, dzięki czemu można dokończyć edycję źródła aplikacji, a następnie skompilować i uruchomić ją bez zerwania. Podsumowując, oto, co zrobisz, aby uaktualnić aplikację:
- Dodaj biblioteki w wersji 9 i biblioteki Compat do swojej aplikacji.
- Zaktualizuj instrukcje importu w kodzie do wersji v9.
- Kod refaktoryzacji dla pojedynczego produktu (na przykład Uwierzytelnianie) do stylu modułowego.
- Opcjonalnie: w tym momencie usuń bibliotekę zgodności uwierzytelniania i kod zgodności dla uwierzytelniania, aby uzyskać korzyści związane z rozmiarem aplikacji dla uwierzytelniania przed kontynuowaniem.
- Refaktoryzacja funkcji dla każdego produktu (na przykład Cloud Firestore, FCM itp.) do stylu modułowego, kompilowanie i testowanie aż do zakończenia wszystkich obszarów.
- Zaktualizuj kod inicjujący do stylu modułowego.
- Usuń wszystkie pozostałe instrukcje zgodności wersji 9 i kod zgodności z aplikacji.
Pobierz pakiet SDK w wersji 9
Aby rozpocząć, pobierz biblioteki w wersji 9 i biblioteki compat za pomocą npm:
npm i firebase@9.17.2 # OR yarn add firebase@9.17.2
Zaktualizuj importy do wersji 9
Aby kod działał po zaktualizowaniu zależności z wersji 8 do wersji 9 beta, zmień instrukcje importu tak, aby używały wersji „compat” każdego importu. Na przykład:
Przed: wersja 8
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Po: kompatybilność z wersją 9
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
Refaktoryzacja do stylu modułowego
Podczas gdy interfejsy API w wersji 8 są oparte na przestrzeni nazw i wzorcu usług w postaci łańcucha kropek, podejście modułowe w wersji 9 oznacza, że Twój kod będzie zorganizowany głównie wokół funkcji . W wersji 9 pakiet firebase/app i inne pakiety nie zwracają pełnego eksportu zawierającego wszystkie metody z pakietu. Zamiast tego pakiety eksportują poszczególne funkcje.
W wersji 9 usługi są przekazywane jako pierwszy argument, a funkcja wykorzystuje szczegóły usługi do wykonania reszty. Przyjrzyjmy się, jak to działa, w dwóch przykładach refaktoryzacji wywołań interfejsów API uwierzytelniania i Cloud Firestore.
Przykład 1: refaktoryzacja funkcji uwierzytelniania
Przed: wersja 9 kompatybilna
Kod zgodności wersji 9 jest identyczny z kodem wersji 8, ale importy uległy zmianie.
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
const auth = firebase.auth();
auth.onAuthStateChanged(user => {
// Check for user status
});
Po: wersja 9 modular
Funkcja getAuth przyjmuje firebaseApp jako pierwszy parametr. Funkcja onAuthStateChanged nie jest powiązana z instancją auth , tak jak w wersji 8; zamiast tego jest to darmowa funkcja, która jako pierwszy parametr przyjmuje auth .
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Aktualizacja obsługi metody uwierzytelniania getRedirectResult
Wersja 9 wprowadza przełomową zmianę w getRedirectResult . Gdy nie zostanie wywołana żadna operacja przekierowania, wersja 9 zwraca null , w przeciwieństwie do wersji 8, która zwróciła UserCredential z użytkownikiem o null .
Przed: wersja 9 kompatybilna
const result = await auth.getRedirectResult()
if (result.user === null && result.credential === null) {
return null;
}
return result;
Po: wersja 9 modular
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;
Przykład 2: refaktoryzacja funkcji Cloud Firestore
Przed: wersja 9 kompatybilna
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);
});
Po: wersja 9 modular
Funkcja getFirestore przyjmuje firebaseApp jako pierwszy parametr, który został zwrócony z initializeApp we wcześniejszym przykładzie. Zwróć uwagę, że kod tworzący zapytanie jest bardzo różny w wersji 9; nie ma łańcuchów, a metody takie jak query lub where są teraz eksponowane jako wolne funkcje.
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());
});
Zaktualizuj odniesienia do Firestore DocumentSnapshot.exists
Wersja 9 wprowadza przełomową zmianę, w której właściwość firestore.DocumentSnapshot.exists została zmieniona na method . Funkcjonalność jest zasadniczo taka sama (testowanie, czy dokument istnieje), ale musisz zmienić kod, aby użyć metody v9, jak pokazano:
Przed: wersja 9 kompatybilna
if (snapshot.exists) {
console.log("the document exists");
}
Po: wersja 9 modular
if (snapshot.exists()) {
console.log("the document exists");
}
Przykład 3: połączenie stylów kodu w wersji 8 i 9
Korzystanie z bibliotek zgodności podczas uaktualniania umożliwia dalsze używanie kodu w wersji 8 wraz z kodem zrefaktoryzowanym dla wersji 9. Oznacza to, że możesz zachować istniejący kod wersji 8 dla Cloud Firestore podczas refaktoryzacji uwierzytelniania lub innego kodu pakietu Firebase SDK do stylu wersji 9, i nadal pomyślnie skompiluj swoją aplikację z obydwoma stylami kodu. To samo dotyczy wersji 8 i 9 kodu w produkcie takim jak Cloud Firestore; nowe i stare style kodu mogą współistnieć, o ile importujesz pakiety zgodności:
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import { getDoc } from 'firebase/firestore'
const docRef = firebase.firestore().doc();
getDoc(docRef);
Należy pamiętać, że chociaż aplikacja zostanie skompilowana, nie uzyskasz korzyści związanych z rozmiarem aplikacji dzięki kodowi modułowemu, dopóki całkowicie nie usuniesz instrukcji compat i kodu z aplikacji.
Zaktualizuj kod inicjujący
Zaktualizuj kod inicjalizacji aplikacji, aby korzystać z nowej modułowej składni wersji 9. Ważne jest, aby zaktualizować ten kod po zakończeniu refaktoryzacji całego kodu w aplikacji; Dzieje się tak dlatego, że firebase.initializeApp() inicjuje stan globalny zarówno dla kompatybilnego, jak i modularnego API, podczas gdy modularna funkcja initializeApp() inicjuje tylko stan dla modularnego.
Przed: wersja 9 kompatybilna
import firebase from "firebase/compat/app"
firebase.initializeApp({ /* config */ });
Po: wersja 9 modular
import { initializeApp } from "firebase/app"
const firebaseApp = initializeApp({ /* config */ });
Usuń kod zgodności
Aby zdać sobie sprawę z korzyści związanych z rozmiarem modularnego SDK w wersji 9, powinieneś ostatecznie przekonwertować wszystkie wywołania na styl modularny pokazany powyżej i usunąć wszystkie instrukcje import "firebase/compat/* z kodu. Po zakończeniu nie powinno być żadnych więcej odniesień do globalnej przestrzeni nazw firebase.* lub dowolnego innego kodu w stylu pakietu SDK wersji 8.
Korzystanie z biblioteki kompatybilnej z okna
Pakiet SDK w wersji 9 jest zoptymalizowany do pracy z modułami, a nie z obiektem window przeglądarki. Poprzednie wersje biblioteki umożliwiały ładowanie i zarządzanie Firebase przy użyciu przestrzeni nazw window.firebase . Nie jest to zalecane w przyszłości, ponieważ nie pozwala na eliminację nieużywanego kodu. Jednak kompatybilna wersja JavaScript SDK działa z window dla programistów, którzy wolą nie rozpoczynać od razu ścieżki aktualizacji modułowej.
<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.17.2/firebase-auth-compat.js"></script>
<script>
const firebaseApp = firebase.initializeApp({ /* Firebase config */ });
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
</script>
Biblioteka kompatybilności wykorzystuje modułowy kod wersji 9 pod maską i zapewnia to samo API, co SDK w wersji 8; oznacza to, że możesz zapoznać się z dokumentacją API wersji 8 i fragmentami kodu wersji 8, aby uzyskać szczegółowe informacje. Ta metoda nie jest zalecana do długotrwałego użytkowania, ale jako początek aktualizacji do w pełni modułowej biblioteki w wersji 9.
Korzyści i ograniczenia wersji 9
W pełni zmodularyzowana wersja 9 ma następujące zalety w porównaniu z wcześniejszymi wersjami:
- Wersja 9 umożliwia radykalnie zmniejszony rozmiar aplikacji. Przyjmuje nowoczesny format modułu JavaScript, co pozwala na praktyki „potrząsania drzewami”, w których importujesz tylko artefakty, których potrzebuje Twoja aplikacja. W zależności od aplikacji, potrząsanie drzewem w wersji 9 może skutkować o 80% mniejszą liczbą kilobajtów niż porównywalna aplikacja zbudowana w wersji 8.
- Wersja 9 będzie nadal korzystać z ciągłego rozwoju funkcji, podczas gdy wersja 8 zostanie zamrożona w przyszłości.