Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Uaktualnij z wersji 8 do modułowego Web SDK

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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 w stanie 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 aktualizacji.

W przypadku aplikacji, które mają bardzo małą ekspozycję na pakiet Firebase Web SDK — na przykład aplikacji, która wykonuje tylko proste wywołanie interfejsów API uwierzytelniania — może być praktyczna refaktoryzacja kodu w wersji 8 bez korzystania z bibliotek zgodnych z wersją 9. Jeśli aktualizujesz taką aplikację, możesz postępować zgodnie z instrukcjami w tym przewodniku dla „modułowej wersji 9” bez korzystania z bibliotek kompatybilnych.

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ę:

  1. Dodaj biblioteki wersji 9 i biblioteki Compat do swojej aplikacji.
  2. Zaktualizuj instrukcje importu w kodzie do wersji v9.
  3. Kod refaktoryzacji dla pojedynczego produktu (np. Uwierzytelnianie) do stylu modułowego.
  4. 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.
  5. 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.
  6. Zaktualizuj kod inicjujący do stylu modułowego.
  7. 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 wersji 9 i biblioteki compat za pomocą npm:

npm i firebase@9.9.4

# OR

yarn add firebase@9.9.4

Zaktualizuj importy do wersji 9

Aby kod nadal 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 wersji 8 są oparte na przestrzeni nazw i wzorcu usług w postaci łańcucha kropek, podejście modułowe 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órej pierwszym parametrem jest auth .

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

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

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. Zauważ, ż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: łączenie stylów kodu w wersji 8 i 9

Korzystanie z bibliotek Compat podczas uaktualniania umożliwia dalsze używanie kodu 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 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);

Pamiętaj, że chociaż Twoja aplikacja będzie się kompilować, nie uzyskasz korzyści związanych z rozmiarem aplikacji dzięki modułowemu kodowi, dopóki całkowicie nie usuniesz instrukcji 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, należy 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.9.4/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.9.4/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, pozwalając 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.