Uaktualnij z wersji 8 do modułowego Web SDK

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.

Podręcznik ten zakłada, że jesteś zaznajomiony z wersji 8 i że będzie skorzystać z modułu Bundler takich jak WebPack lub pakietu zbiorczego dla modernizacji i bieżącej wersji 9 rozwoju.

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. Musisz NPM lub przędzę zainstalować SDK.

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 nawierzchnia API zaprojektowane w celu ułatwienia drzewo drżenie (usunięcie nieużywanego kodu), aby uczynić swoją aplikację jako małe i szybko jak to możliwe.
  • Compat - znajomy powierzchnia API, które jest w pełni kompatybilny z wersją 8 SDK, dzięki czemu można uaktualnić do wersji 9 bez zmiany wszystkich kodzie Firebase naraz. 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 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 w wersji 9 i biblioteki Compat do swojej aplikacji.
  2. Zaktualizuj instrukcje importu w kodzie do wersji v9.
  3. Kod refaktoryzacji dla pojedynczego produktu (na przykład 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. Refaktoryzuj funkcje dla każdego produktu (na przykład Cloud Firestore, FCM itp.) do stylu modułowego, kompilując i testując, aż wszystkie obszary zostaną ukończone.
  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 w wersji 9 i biblioteki compat za pomocą npm:

npm i firebase@9.6.4

# OR

yarn add firebase@9.6.4

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 wersja 8 API oparte są na łańcuchu dot przestrzeni nazw i usług wzór, wersja 9 jest podejście modułowe środki, że kod zostanie zorganizowana głównie wokół funkcji. W wersji 9, firebase/app pakiet i inne pakiety nie zwracają kompleksowe eksportu, który zawiera 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

getAuth funkcja przyjmuje firebaseApp jako pierwszy parametr. onAuthStateChanged funkcja jest łańcuchem z auth przykład jak byłoby w wersji 8; Zamiast tego, jest to darmowy funkcja, która bierze auth jako pierwszy parametr.

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

getFirestore funkcja przyjmuje firebaseApp jako pierwszy parametr, który został zwrócony initializeApp we wcześniejszym przykładzie. Zwróć uwagę, że kod tworzący zapytanie jest bardzo różny w wersji 9; nie łańcuchowym i metod, takich jak query lub where jest odsłonięty w postaci wolnych funkcji.

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());
});

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 odnosi się do wersji 8 i 9 kodu na produkcie, takich jak chmura 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, jakie daje kod modułowy, 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ły kod w aplikacji; to dlatego firebase.initializeApp() inicjuje stan globalnej zarówno COMPAT i API modułowych, natomiast modułowa initializeApp() funkcja inicjuje tylko stan na modułowym.

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 czerpać korzyści wielkości danej wersji 9 modułowej SDK, należy ostatecznie przekształcić wszystkie wywołania modułowej stylu przedstawionym powyżej i wyjąć cały import "firebase/compat/* oświadczenia kodzie. Kiedy skończysz, tam nie powinno być więcej odniesień do firebase.* globalnej przestrzeni nazw lub inny kod w wersji 8 SDK stylu.

Korzystanie z biblioteki kompatybilnej z okna

Wersja 9 SDK jest zoptymalizowany do pracy z modułami zamiast przeglądarki window obiektu. Poprzednie wersje biblioteki dozwolone ładowanie i zarządzanie Firebase za pomocą window.firebase nazw. Nie jest to zalecane w przyszłości, ponieważ nie pozwala na eliminację nieużywanego kodu. Jednak compat wersja JavaScript SDK działa z window dla programistów, którzy wolą nie od razu rozpocząć modułową upgrade'u.

<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.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; to oznacza, że można odwołać się do dokumentacji API w wersji 8 i wersji 8 fragmentów kodu do szczegółów. 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% mniej 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.