Informacje o Firebase dla aplikacji internetowych

Podczas tworzenia aplikacji internetowej za pomocą Firebase możesz natknąć się na nieznane pojęcia lub obszary, w których potrzebujesz więcej informacji, by podjąć właściwe decyzje dotyczące projektu. Znajdziesz tu odpowiedzi na te pytania i linki do materiałów, z których dowiesz się więcej.

Jeśli masz pytania na temat, którego nie ma na tej stronie, odwiedź jedną z naszych społeczności online. Co jakiś czas będziemy też na niej dodawać nowe tematy, więc zaglądaj tu regularnie.

Wersje pakietu SDK: z przestrzenią nazw i modułowa

Firebase udostępnia 2 platformy API dla aplikacji internetowych:

  • JavaScript – z przestrzenią nazw. To interfejs JavaScript, którego Firebase używa od wielu lat. Deweloperzy aplikacji znają go od wielu lat. Interfejs API z przestrzenią nazw nie korzysta z ciągłej obsługi nowych funkcji, dlatego większość nowych aplikacji powinna korzystać z modułowego interfejsu API.
  • JavaScript – modułowy. Ten pakiet SDK opiera się na modułowym podejściu, który zapewnia mniejszy rozmiar pakietu SDK i większą wydajność dzięki nowoczesnym narzędziom do tworzenia skryptów JavaScript, takim jak webpack czy Rollup.

Modułowy interfejs API dobrze integruje się z narzędziami do kompilacji, które wyodrębniają kod, który nie jest używany w aplikacji. Jest to tzw. „potrząsanie drzewa”. Aplikacje oparte na tym pakiecie SDK mają znacznie mniejszy rozmiar. Chociaż interfejs API z przestrzenią nazw jest dostępny jako moduł, nie ma czysto modułowej struktury i nie zapewnia takiego samego stopnia zmniejszania rozmiaru.

Chociaż większość modułowego interfejsu API przestrzega tych samych wzorców co interfejs API z przestrzenią nazw, sposób organizacji kodu jest jednak inny. Ogólnie interfejs API z przestrzenią nazw jest zorientowany na przestrzeń nazw i wzorzec usługi, a modułowy interfejs API – na funkcje dyskretne. Na przykład łańcuch punktowy interfejsu API z przestrzeni nazw, taki jak firebaseApp.auth(), zostaje zastąpiony w modułowym interfejsie API pojedynczą funkcją getAuth(), która pobiera firebaseApp i zwraca instancję uwierzytelniania.

Oznacza to, że aplikacje internetowe tworzone za pomocą interfejsu API z przestrzenią nazw wymagają refaktoryzacji, aby mogły być modułowe. Więcej informacji znajdziesz w przewodniku po uaktualnieniu.

JavaScript – modułowy interfejs API dla nowych aplikacji

Jeśli rozpoczynasz nową integrację z Firebase, możesz włączyć modułowy interfejs API podczas dodawania i inicjowania pakietu SDK.

Podczas tworzenia aplikacji pamiętaj, że kod zależy głównie od funkcji. W modularnym interfejsie API usługi są przekazywane jako pierwszy argument, a funkcja wykorzystuje szczegóły usługi do obsługi pozostałych. 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 informacji znajdziesz w przewodnikach dotyczących poszczególnych usług oraz w modułowej dokumentacji interfejsu API.

Sposoby dodawania do aplikacji internetowych pakietów SDK

Firebase udostępnia biblioteki JavaScriptu na potrzeby większości usług Firebase, w tym Zdalnej konfiguracji i FCM. Sposób dodawania pakietów SDK Firebase do aplikacji internetowej zależy od tego, jakiego narzędzia w niej używasz (np. modułu grupowania modułów).

Możesz dodać do aplikacji dowolną z dostępnych bibliotek, korzystając z jednej z obsługiwanych metod:

  • npm (dla grup pakietów modułów)
  • CDN (sieć dostarczania treści)

Szczegółowe instrukcje konfiguracji znajdziesz w artykule Dodawanie Firebase do aplikacji JavaScript. W dalszej części tej sekcji znajdziesz informacje, które pomogą Ci wybrać jedną z dostępnych opcji.

npm

Gdy pobierzesz pakiet npm Firebase (zawierający zarówno przeglądarkę, jak i pakiety Node.js), uzyskasz lokalną kopię pakietu SDK Firebase, która może być potrzebna w przypadku aplikacji innych niż przeglądarki, takich jak aplikacje Node.js, React Native czy Electron. W przypadku niektórych pakietów możesz pobrać pakiety Node.js i React Native. Pakiety Node.js są niezbędne na etapie renderowania po stronie serwera (SSR) platform SSR.

Używanie npm z narzędziem do tworzenia pakietów modułów takim jak webpack lub Rollup zapewnia opcje optymalizacji nieużywanego kodu i stosowania kierowanych elementów polyfill, które mogą znacznie zmniejszyć rozmiar aplikacji. Wdrożenie tych funkcji może nieco komplikować konfigurację i łańcuch kompilacji, ale pomagają w tym różne popularne narzędzia wiersza poleceń. Są to między innymi Angular, React, Vue czy Next.

W skrócie:

  • Zapewnia cenną optymalizację rozmiaru aplikacji
  • Dostępne są zaawansowane 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 pakietu SDK, która może być znajoma wielu programistów. Jeśli dodasz pakiety SDK, korzystając z CDN, nie będziesz potrzebować narzędzia do tworzenia, a łańcuch kompilacji może być prostszy i łatwiejszy w obsłudze w porównaniu z pakietami modułów. Jeśli rozmiar zainstalowanej aplikacji nie jest dla Ciebie ważny i nie masz specjalnych wymagań, takich jak transpilacja z TypeScriptu, dobrym rozwiązaniem może być CDN.

W skrócie:

  • Znane i proste
  • Odpowiednie, gdy rozmiar aplikacji nie jest poważnym problemem
  • Przydaje się, gdy w Twojej witrynie nie są używane narzędzia do tworzenia kompilacji.

Warianty pakietu SDK Firebase Web SDK

Internetowego pakietu SDK Firebase można używać zarówno w przeglądarkach, jak i aplikacjach węzłów. Jednak niektóre usługi są niedostępne w środowiskach węzłów. Zobacz listę obsługiwanych środowisk.

Niektóre pakiety SDK usług udostępniają osobne wersje przeglądarki i węzła, z których każdy jest dostępny w formatach ESM i CJS, a niektóre pakiety SDK obejmują nawet wersje natywne Cordova lub React. Pakiet Web SDK jest skonfigurowany tak, aby podawać prawidłowy wariant na podstawie konfiguracji narzędzi lub środowiska i w większości przypadków nie powinien wymagać ręcznego wyboru. Wszystkie wersje pakietu SDK zostały zaprojektowane tak, aby pomagać w tworzeniu aplikacji internetowych lub klienckich zapewniających dostęp użytkownikom, np. aplikacji komputerowych Node.js lub aplikacji IoT. Jeśli chcesz skonfigurować dostęp administracyjny ze środowisk z podwyższonymi uprawnieniami (np. serwerów), użyj pakietu SDK Firebase Admin.

Wykrywanie środowiska za pomocą pakietów i platform

Gdy zainstalujesz pakiet Web SDK Firebase przy użyciu npm, zainstalowane zostaną wersje JavaScript i Node.js. Ten pakiet umożliwia szczegółowe wykrywanie środowiska, dzięki czemu możesz wybrać odpowiednie pakiety dla swojej aplikacji.

Jeśli Twój kod korzysta z instrukcji require w Node.js, pakiet SDK znajdzie pakiet dla danego węzła. W przeciwnym razie ustawienia dostawcy pakietu muszą prawidłowo wskazywać odpowiednie pole punktu wejścia w pliku package.json (np. main, browser lub module). Jeśli podczas działania pakietu SDK wystąpią błędy, sprawdź, czy w pakiecie SDK skonfigurowano priorytet właściwego typu pakietu dla Twojego środowiska.

Więcej informacji o obiekcie konfiguracyjnym Firebase

Aby zainicjować Firebase w swojej aplikacji, musisz podać konfigurację projektu Firebase aplikacji. W każdej chwili możesz uzyskać swój obiekt konfiguracyjny Firebase.

  • Nie zalecamy ręcznego edytowania obiektu konfiguracyjnego, a zwłaszcza tych wymaganych „opcji Firebase”: apiKey, projectId i appID. Jeśli zainicjujesz aplikację z nieprawidłowymi lub brakującymi wartościami dla tych wymaganych „opcji Firebase”, użytkownicy mogą mieć poważne problemy. Wyjątkiem jest authDomain, który możesz zaktualizować zgodnie ze sprawdzonymi metodami korzystania z logowania signInWithRedirect.

  • Jeśli w projekcie Firebase masz włączoną usługę Google Analytics, obiekt config zawiera pole measurementId. Więcej informacji o tym polu znajdziesz na stronie Pierwsze kroki z Analytics.

  • Jeśli włączysz Google Analytics lub Bazę danych czasu rzeczywistego po utworzeniu aplikacji internetowej Firebase, upewnij się, że obiekt konfiguracyjny Firebase, którego używasz w aplikacji, został zaktualizowany o powiązane wartości konfiguracji (odpowiednio measurementId i databaseURL). W każdej chwili możesz uzyskać swój obiekt konfiguracyjny Firebase.

Oto format obiektu konfiguracji z włączonymi wszystkimi usługami (wartości te 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 wczytywania pakietów SDK Firebase (z CDN)

Możesz opóźnić uwzględnienie pakietów SDK Firebase do czasu wczytania całej strony. Jeśli używasz modułowych skryptów CDN na potrzeby interfejsu <script type="module">, jest to działanie domyślne. Jeśli jako modułu używasz skryptów CDN w przestrzeni nazw, wykonaj te czynności, by opóźnić wczytywanie:

  1. Dodaj flagę defer do każdego tagu script pakietów SDK Firebase, a następnie odłóż inicjalizację Firebase za pomocą drugiego skryptu, np.:

    <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 potem umieść w nim te elementy:

    // TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

Korzystanie z wielu projektów Firebase w jednej aplikacji

W większości przypadków wystarczy zainicjować Firebase tylko w jednej, domyślnej aplikacji. Dostęp do Firebase z tej aplikacji możesz uzyskać na 2 równe 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

Interfejs API internetowej przestrzeni nazw

// 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 trzeba jednak mieć dostęp do wielu projektów Firebase jednocześnie. Możesz na przykład odczytywać dane z bazy danych jednego projektu Firebase i przechowywać pliki w innym projekcie Firebase. Możesz też uwierzytelnić jeden projekt, a drugi pozostawić bez uwierzytelnienia.

Pakiet Firebase JavaScript SDK umożliwia zainicjowanie wielu projektów Firebase i korzystanie z nich w jednej aplikacji jednocześnie. Każdy projekt korzysta z własnych informacji o konfiguracji 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

Interfejs API internetowej przestrzeni nazw

// 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

Uruchamianie lokalnego serwera WWW na potrzeby programowania

Jeśli tworzysz aplikację internetową, niektóre części pakietu SDK Firebase JavaScript SDK wymagają udostępniania aplikacji na serwerze, a nie z lokalnego systemu plików. Możesz użyć interfejsu wiersza poleceń Firebase do uruchomienia serwera lokalnego.

Jeśli masz już skonfigurowany Hosting Firebase dla swojej aplikacji, prawdopodobnie niektóre z poniższych kroków zostały już wykonane.

Aby udostępniać swoją aplikację internetową, użyj interfejsu wiersza poleceń Firebase – narzędzia wiersza poleceń.

  1. Informacje o tym, jak zainstalować interfejs wiersza poleceń lub zaktualizować go do najnowszej wersji, znajdziesz w dokumentacji interfejsu wiersza poleceń Firebase.

  2. Zainicjuj projekt Firebase. Uruchom to polecenie w katalogu głównym lokalnego katalogu aplikacji:

    firebase init

  3. Uruchom serwer lokalny na potrzeby programowania. Uruchom to polecenie w katalogu głównym lokalnego katalogu aplikacji:

    firebase serve

Zasoby open source dotyczące pakietów SDK Firebase JavaScript

Firebase wspiera programowanie open source, dlatego zachęcamy do przesyłania opinii i dzielenia się opiniami społeczności.

Pakiety SDK Firebase JavaScript

Większość pakietów SDK Firebase w języku JavaScript jest opracowywanych jako biblioteki open source dostępne w naszym publicznym repozytorium Firebase na GitHubie.

Przykłady krótkiego wprowadzenia

Firebase przechowuje zbiór przykładów szybkiego startu dla większości interfejsów API Firebase w internecie. Te krótkie wprowadzenia znajdziesz w naszym publicznym repozytorium krótkiego wprowadzenia Firebase na GitHubie. Możesz użyć tych krótkich wprowadzeń jako przykładowego kodu do używania pakietów SDK Firebase.