Dowiedz się więcej o sieci i Firebase

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 i appID . 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 i databaseURL ). 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:

  1. Dodaj flagę defer do każdego tagu script 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>

  2. 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();
app_default_init_options.js

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();
firebaseapp.js

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);
app_multi_project_init_options.js

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();
firebaseapp.js

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ń.

  1. Odwiedź dokumentację interfejsu CLI Firebase, aby dowiedzieć się, jak zainstalować interfejs CLI lub zaktualizować go do najnowszej wersji .

  2. Zainicjuj projekt Firebase. Uruchom następujące polecenie z katalogu głównego lokalnego katalogu aplikacji:

    firebase init

  3. 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.