Podczas tworzenia aplikacji internetowej przy użyciu Firebase możesz napotkać nieznane koncepcje lub obszary, w których potrzebujesz więcej informacji, aby podjąć właściwe decyzje dotyczące swojego projektu. Celem tej strony jest udzielenie odpowiedzi na te pytania lub wskazanie zasobów, w których można dowiedzieć się więcej.
Jeśli masz pytania dotyczące tematów nie poruszonych na tej stronie, odwiedź jedną z naszych społeczności internetowych . Będziemy także okresowo aktualizować tę stronę o nowe tematy, więc sprawdzaj ponownie, czy dodaliśmy temat, o którym chcesz się dowiedzieć.
Wersje SDK: z przestrzenią nazw i modułowe
Firebase udostępnia dwie powierzchnie API dla aplikacji internetowych:
- JavaScript - przestrzeń nazw. Jest to interfejs JavaScript, który Firebase utrzymywał przez wiele lat i jest znany twórcom stron internetowych ze starszymi aplikacjami Firebase. Ponieważ interfejs API z przestrzenią nazw nie korzysta z ciągłej obsługi nowych funkcji, większość nowych aplikacji powinna zamiast tego przyjmować modułowy interfejs API.
- JavaScript - modułowy . Ten zestaw SDK opiera się na podejściu modułowym, które zapewnia zmniejszony rozmiar zestawu SDK i większą wydajność dzięki nowoczesnym narzędziom do tworzenia JavaScript, takim jak webpack lub Rollup .
Modułowy interfejs API dobrze integruje się z narzędziami do tworzenia, które usuwają kod, który nie jest używany w aplikacji. Jest to proces znany jako „wstrząsanie drzewem”. Aplikacje utworzone przy użyciu tego zestawu SDK charakteryzują się znacznie zmniejszonymi rozmiarami. API z przestrzenią nazw, choć dostępne jako moduł, nie ma ściśle modułowej struktury i nie zapewnia takiego samego stopnia redukcji rozmiaru.
Chociaż większość modułowego interfejsu API ma te same wzorce, co interfejs API z przestrzenią nazw, organizacja kodu jest inna. Ogólnie rzecz biorąc, interfejs API z przestrzenią nazw jest zorientowany na przestrzeń nazw i wzorzec usług, podczas gdy modułowy interfejs API jest zorientowany na funkcje dyskretne. Na przykład łączenie kropek w interfejsie API z przestrzenią nazw, takie jak firebaseApp.auth()
, zostało zastąpione w modułowym interfejsie API pojedynczą funkcją getAuth()
, która pobiera firebaseApp
i zwraca instancję uwierzytelniania.
Oznacza to, że aplikacje internetowe utworzone za pomocą interfejsu API z przestrzenią nazw wymagają refaktoryzacji, aby móc korzystać z modułowego projektowania aplikacji. Dalsze szczegóły znajdziesz w przewodniku aktualizacji .
JavaScript - modułowe API dla nowych aplikacji
Jeśli rozpoczynasz nową integrację z Firebase, możesz zdecydować się na modułowe API podczas dodawania i inicjowania pakietu SDK .
Tworząc aplikację, pamiętaj, że kod będzie zorganizowany głównie wokół funkcji . W modułowym API usługi są przekazywane jako pierwszy argument, a funkcja następnie wykorzystuje szczegóły usługi, aby zrobić resztę. Na przykład:
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
// Check for user status
});
Więcej przykładów i szczegółów można znaleźć w przewodnikach dla poszczególnych obszarów produktów oraz w dokumentacji modułowej API .
Sposoby dodawania internetowych zestawów SDK do aplikacji
Firebase udostępnia biblioteki JavaScript dla większości produktów Firebase, w tym Remote Config, FCM i innych. Sposób dodawania pakietów SDK Firebase do aplikacji internetowej zależy od narzędzi używanych w aplikacji (np. pakietu modułów).
Możesz dodać dowolne dostępne biblioteki do swojej aplikacji za pomocą jednej z obsługiwanych metod:
- npm (dla programów pakujących moduły)
- CDN (sieć dostarczania treści)
Szczegółowe instrukcje konfiguracji znajdziesz w artykule Dodawanie Firebase do aplikacji JavaScript . Pozostała część tej sekcji zawiera informacje pomocne w wyborze dostępnych opcji.
npm
Pobranie pakietu Firebase npm (który obejmuje pakiety przeglądarki i Node.js) zapewnia lokalną kopię pakietu SDK Firebase, która może być potrzebna w przypadku aplikacji innych niż przeglądarka, takich jak aplikacje Node.js, React Native lub Electron. Plik do pobrania zawiera pakiety Node.js i React Native jako opcję dla niektórych pakietów. Pakiety Node.js są niezbędne na etapie renderowania po stronie serwera (SSR) frameworków SSR.
Używanie npm z pakietem modułów, takim jak webpack lub Rollup , zapewnia opcje optymalizacji polegające na „wstrząśnięciu drzewem” nieużywanego kodu i zastosowaniu ukierunkowanych wypełnień, co może znacznie zmniejszyć rozmiar aplikacji. Wdrożenie tych funkcji może zwiększyć złożoność konfiguracji i łańcucha kompilacji, ale różne główne narzędzia CLI mogą pomóc to złagodzić. Narzędzia te obejmują Angular , React , Vue , Next i inne.
W podsumowaniu:
- Zapewnia cenną optymalizację rozmiaru aplikacji
- Dostępne są solidne narzędzia do zarządzania modułami
- Wymagane w przypadku SSR z Node.js
CDN (sieć dostarczania treści)
Dodawanie bibliotek przechowywanych w sieci CDN Firebase to prosta metoda konfiguracji zestawu SDK, która może być znana wielu programistom. Używając CDN do dodawania zestawów SDK, nie będziesz potrzebować narzędzia do kompilacji, a łańcuch kompilacji może być prostszy i łatwiejszy w obsłudze w porównaniu z programami pakującymi moduły. Jeśli nie przejmujesz się szczególnie rozmiarem zainstalowanej aplikacji i nie masz specjalnych wymagań, takich jak transpilacja z TypeScript, CDN może być dobrym wyborem.
W podsumowaniu:
- Znane i proste
- Odpowiednie, gdy rozmiar aplikacji nie jest głównym problemem
- Odpowiednie, gdy Twoja witryna nie korzysta z narzędzi do tworzenia.
Warianty Firebase Web SDK
Zestaw SDK sieci Web Firebase może być używany zarówno w przeglądarkach, jak i aplikacjach Node. Jednak kilka produktów nie jest dostępnych w środowiskach Node. Zobacz listę obsługiwanych środowisk .
Niektóre zestawy SDK produktów zapewniają oddzielne warianty przeglądarki i węzła, z których każdy jest dostępny zarówno w formacie ESM, jak i CJS, a niektóre zestawy SDK produktów zapewniają nawet warianty Cordova lub React Native. Zestaw Web SDK jest skonfigurowany tak, aby zapewniał prawidłowy wariant w oparciu o konfigurację narzędzi lub środowisko i w większości przypadków nie powinien wymagać ręcznego wyboru. Wszystkie warianty pakietu SDK zaprojektowano tak, aby ułatwiały tworzenie aplikacji internetowych lub aplikacji klienckich zapewniających dostęp użytkownikom końcowym, na przykład w aplikacji komputerowej Node.js lub aplikacji IoT. Jeśli Twoim celem jest skonfigurowanie dostępu administracyjnego ze środowisk uprzywilejowanych (takich jak serwery), użyj zamiast tego pakietu Firebase Admin SDK .
Wykrywanie środowiska za pomocą pakietów i frameworków
Gdy instalujesz pakiet Firebase Web SDK przy użyciu npm, instalowane są zarówno wersje JavaScript, jak i Node.js. Pakiet zapewnia szczegółowe wykrywanie środowiska, aby włączyć odpowiednie pakiety dla Twojej aplikacji.
Jeśli Twój kod używa instrukcji Node.js require
, zestaw SDK znajdzie pakiet specyficzny dla węzła. W przeciwnym razie ustawienia programu pakującego muszą być poprawnie skonfigurowane, aby wykryć właściwe pole punktu wejścia w pliku package.json
(na przykład main
, browser
lub module
). Jeśli wystąpią błędy w czasie wykonywania pakietu SDK, sprawdź, czy program pakujący jest skonfigurowany tak, aby nadawał priorytet właściwemu typowi pakietu dla Twojego środowiska.
Dowiedz się więcej o obiekcie konfiguracyjnym Firebase
Aby zainicjować Firebase w swojej aplikacji, musisz podać konfigurację projektu Firebase swojej aplikacji. Obiekt konfiguracyjny Firebase możesz uzyskać w dowolnym momencie.
Nie zalecamy ręcznej edycji obiektu konfiguracyjnego, zwłaszcza następujących wymaganych „opcji Firebase”:
apiKey
,projectId
iappID
. Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami wymaganych „opcji Firebase”, użytkownicy Twojej aplikacji mogą napotkać poważne problemy.Jeśli w projekcie Firebase włączyłeś Google Analytics, obiekt konfiguracyjny zawiera pole
measurementId
. Więcej informacji na temat tego pola znajdziesz na stronie wprowadzającej do Analytics .Jeśli po utworzeniu aplikacji internetowej Firebase włączysz usługę Google Analytics lub bazę danych czasu rzeczywistego, upewnij się, że obiekt konfiguracyjny Firebase, którego używasz w aplikacji, został zaktualizowany o powiązane wartości konfiguracyjne (odpowiednio
measurementId
idatabaseURL
). Obiekt konfiguracyjny Firebase możesz uzyskać w dowolnym momencie.
Oto format obiektu konfiguracyjnego z włączonymi wszystkimi usługami (te wartości są wypełniane automatycznie):
var firebaseConfig = { apiKey: "API_KEY", authDomain: "PROJECT_ID.firebaseapp.com", // The value of `databaseURL` depends on the location of the database databaseURL: "https://DATABASE_NAME.firebaseio.com", projectId: "PROJECT_ID", storageBucket: "PROJECT_ID.appspot.com", messagingSenderId: "SENDER_ID", appId: "APP_ID", // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field measurementId: "G-MEASUREMENT_ID", };
Dostępne biblioteki
Dodatkowe opcje konfiguracji
Opóźnienie ładowania pakietów SDK Firebase (z CDN)
Możesz opóźnić włączenie pakietów SDK Firebase do czasu załadowania całej strony. Jeśli używasz modułowych skryptów CDN API z <script type="module">
, jest to zachowanie domyślne. Jeśli używasz skryptów CDN z przestrzenią nazw jako modułu, wykonaj następujące kroki, aby odroczyć ładowanie:
Dodaj flagę
defer
do każdego taguscript
dla zestawów SDK Firebase, a następnie odłóż inicjalizację Firebase za pomocą drugiego skryptu, na przykład:<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script> <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script> // ... <script defer src="./init-firebase.js"></script>
Utwórz plik
init-firebase.js
, a następnie umieść w nim następujące informacje:// TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig);
Korzystaj z wielu projektów Firebase w jednej aplikacji
W większości przypadków wystarczy zainicjować Firebase w jednej, domyślnej aplikacji. Dostęp do Firebase można uzyskać z tej aplikacji na dwa równoważne sposoby:
Web modular API
import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a "default" Firebase project const defaultProject = initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = getStorage(defaultProject); let defaultFirestore = getFirestore(defaultProject); // Option 2: Access Firebase services using shorthand notation defaultStorage = getStorage(); defaultFirestore = getFirestore();
Web namespaced API
// Initialize Firebase with a "default" Firebase project const defaultProject = firebase.initializeApp(firebaseConfig); console.log(defaultProject.name); // "[DEFAULT]" // Option 1: Access Firebase services via the defaultProject variable let defaultStorage = defaultProject.storage(); let defaultFirestore = defaultProject.firestore(); // Option 2: Access Firebase services using shorthand notation defaultStorage = firebase.storage(); defaultFirestore = firebase.firestore();
Czasami jednak trzeba uzyskać dostęp do wielu projektów Firebase w tym samym czasie. Na przykład możesz chcieć odczytać dane z bazy danych jednego projektu Firebase, ale przechowywać pliki w innym projekcie Firebase. Możesz też chcieć uwierzytelnić jeden projekt, pozostawiając drugi projekt nieuwierzytelniony.
Zestaw SDK Firebase JavaScript umożliwia inicjowanie i używanie wielu projektów Firebase w jednej aplikacji w tym samym czasie, przy czym każdy projekt korzysta z własnych informacji konfiguracyjnych Firebase.
Web modular API
import { initializeApp, getApp } from "firebase/app"; import { getStorage } from "firebase/storage"; import { getFirestore } from "firebase/firestore"; // Initialize Firebase with a default Firebase project initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = initializeApp(otherProjectFirebaseConfig, "other"); console.log(getApp().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = getStorage(); const defaultFirestore = getFirestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = getStorage(otherProject); const otherFirestore = getFirestore(otherProject);
Web namespaced API
// Initialize Firebase with a default Firebase project firebase.initializeApp(firebaseConfig); // Initialize Firebase with a second Firebase project const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other"); console.log(firebase.app().name); // "[DEFAULT]" console.log(otherProject.name); // "otherProject" // Use the shorthand notation to access the default project's Firebase services const defaultStorage = firebase.storage(); const defaultFirestore = firebase.firestore(); // Use the otherProject variable to access the second project's Firebase services const otherStorage = otherProject.storage(); const otherFirestore = otherProject.firestore();
Uruchom lokalny serwer WWW na potrzeby programowania
Jeśli tworzysz aplikację internetową, niektóre części pakietu SDK Firebase JavaScript wymagają udostępniania aplikacji internetowej z serwera, a nie z lokalnego systemu plików. Możesz użyć interfejsu CLI Firebase do uruchomienia serwera lokalnego.
Jeśli skonfigurowałeś już Hosting Firebase dla swojej aplikacji, być może wykonałeś już kilka poniższych kroków.
Do obsługi aplikacji internetowej będziesz używać interfejsu wiersza poleceń Firebase, narzędzia wiersza poleceń.
Odwiedź dokumentację interfejsu CLI Firebase, aby dowiedzieć się, jak zainstalować interfejs CLI lub zaktualizować go do najnowszej wersji .
Zainicjuj projekt Firebase. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji:
firebase init
Łączy lokalny katalog aplikacji z Firebase
Generuje plik
firebase.json
(plik wymagany dla Hostingu Firebase)Monituje o określenie publicznego katalogu głównego, który zawiera publiczne pliki statyczne (HTML, CSS, JS itp.)
Domyślna nazwa katalogu, którego szuka Firebase, to „publiczny”. Możesz także ustawić katalog publiczny później, bezpośrednio modyfikując plik
firebase.json
.
Uruchom serwer lokalny w celu programowania. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji:
firebase serve
Zasoby typu open source dla zestawów SDK Firebase JavaScript
Firebase wspiera rozwój oprogramowania typu open source i zachęcamy społeczność do wnoszenia wkładu i przesyłania opinii.
Zestawy SDK JavaScript Firebase
Większość zestawów SDK Firebase JavaScript jest opracowywanych jako biblioteki open source w naszym publicznym repozytorium Firebase GitHub .
Próbki szybkiego startu
Firebase utrzymuje zbiór przykładów szybkiego startu dla większości interfejsów API Firebase w Internecie. Znajdź te przewodniki Szybki start w naszym publicznym repozytorium szybkiego startu Firebase GitHub . Możesz użyć tych przewodników Szybki Start jako przykładowego kodu do korzystania z zestawów SDK Firebase.